hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.11:新增tagsView显示/隐藏图标'

Browse Source
This commit is contained in:
lyt 2021-01-11 18:48:34 +08:00
parent de03cda45e
commit 39778d9629
13 changed files with 63 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
vue-admin-wonderful-next/src/App.vue
View File

@ -8,6 +8,7 @@ import { setIconfont } from "/@/utils/setIconfont.ts";
export default {
name: "app",
setup() {
// 设置批量第三方 icon 图标
onBeforeMount(() => {
setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
});

1
vue-admin-wonderful-next/src/store/index.ts
View File

@ -28,6 +28,7 @@ export interface RootStateTypes {
isShowLogoChange: boolean,
isBreadcrumb: boolean,
isTagsview: boolean,
isTagsviewIcon: boolean,
isFooter: boolean,
isGrayscale: boolean,
isInvert: boolean,

2
vue-admin-wonderful-next/src/theme/common/var.scss
View File

@ -60,7 +60,7 @@ $--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
$--bg-topBar: #ffffff;
$--bg-menuBar: #29384d;
$--bg-columnsMenuBar: #6bb4ff;
$--bg-columnsMenuBar: #4276ab;
$--bg-topBarColor: #606266;
$--bg-menuBarColor: #e6e6e6;
$--bg-columnsMenuBarColor: #e6e6e6;

3
vue-admin-wonderful-next/src/utils/themeConfig.ts
View File

@ -8,7 +8,7 @@ export default {
danger: "#f56c6c",
topBar: "#ffffff",
menuBar: "#29384d",
columnsMenuBar: '#6BB4FF',
columnsMenuBar: '#4276ab',
topBarColor: "#606266",
menuBarColor: "#e6e6e6",
columnsMenuBarColor: '#e6e6e6',
@ -25,6 +25,7 @@ export default {
isShowLogoChange: false,
isBreadcrumb: true,
isTagsview: true,
isTagsviewIcon: false,
isFooter: false,
isGrayscale: false,
isInvert: false,

1
vue-admin-wonderful-next/src/utils/wartermark.ts
View File

@ -31,7 +31,6 @@ const watermark = {
set: (str: any) => {
let id = setWatermark(str)
if (document.getElementById(id) === null) id = setWatermark(str)
window.onresize = () => { setWatermark(str) }
},
// 删除水印
del: () => {

2
vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue
View File

@ -12,7 +12,7 @@
</div>
</template>
<template v-else>
<a :href="v.meta.isLink" target="_block">
<a :href="v.meta.isLink" target="_blank">
<i :class="v.meta.icon"></i>
<div class="layout-columns-aside-li-box-title">
{{v.meta.title}}

1
vue-admin-wonderful-next/src/views/layout/footer/index.vue
View File

@ -16,6 +16,7 @@ export default {
const state = reactive({
isDelayFooter: true,
});
// 路由改变时，等主界面动画加载完毕再显示 footer
onBeforeRouteUpdate((to, from) => {
state.isDelayFooter = false;
setTimeout(() => {

2
vue-admin-wonderful-next/src/views/layout/logo/index.vue
View File

@ -41,7 +41,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(0 21 41 / 3%) 0px 1px 4px;
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
color: var(--color-primary);
font-size: 16px;
cursor: pointer;

4
vue-admin-wonderful-next/src/views/layout/main/transverse.vue
View File

@ -6,12 +6,10 @@
</template>
<script>
import Aside from '/@/views/layout/component/aside.vue';
import Header from '/@/views/layout/component/header.vue';
import Main from '/@/views/layout/component/main.vue';
import TagsView from "/@/views/layout/navBars/tagsView/tagsView.vue";
export default {
name: 'layoutTransverse',
components: { Aside, Header, Main, TagsView }
components: { Header, Main }
}
</script>

24
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue
View File

@ -1,9 +1,8 @@
<template>
<div class="layout-navbars-breadcrumb-index">
<Logo
v-if="getThemeConfig.isShowLogo && getThemeConfig.layout === 'classic' || getThemeConfig.isShowLogo && getThemeConfig.layout === 'transverse'" />
<Logo v-if="setIsShowLogo" />
<Breadcrumb />
<Horizontal :menuList="menuList" v-if="getThemeConfig.layout === 'transverse'" />
<Horizontal :menuList="menuList" v-if="isLayoutTransverse" />
<User />
</div>
</template>
@ -20,9 +19,6 @@ export default {
components: { Breadcrumb, User, Logo, Horizontal },
setup() {
const store = useStore();
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
const state = reactive({
menuList: [
{
@ -72,8 +68,24 @@ export default {
},
],
});
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
const setIsShowLogo = computed(() => {
let { isShowLogo, layout } = store.state.themeConfig;
return (
(isShowLogo && layout === "classic") ||
(isShowLogo && layout === "transverse")
);
});
const isLayoutTransverse = computed(() => {
let { layout } = store.state.themeConfig;
return layout === "transverse";
});
return {
getThemeConfig,
setIsShowLogo,
isLayoutTransverse,
...toRefs(state),
};
},

38
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
View File

@ -161,6 +161,12 @@
<el-switch v-model="getThemeConfig.isTagsview"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview 图标</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isTagsviewIcon"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
@ -290,12 +296,12 @@
</div>
</div>
<div class="copy-config">
<el-alert title="点击下方按钮，复制布局配置。" type="warning" :closable="false">
<el-alert title="点击下方按钮，复制 / 还原布局配置。" type="warning" :closable="false">
</el-alert>
<el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary">一键复制配置
</el-button>
<el-button size="small" class="copy-config-btn copy-config-last-btn" icon="el-icon-refresh" type="warning">
一键恢复默认</el-button>
一键还原配置</el-button>
</div>
</el-scrollbar>
</el-drawer>
@ -439,10 +445,10 @@ export default defineComponent({
if (getThemeConfig.value.layout === layout) return false;
getThemeConfig.value.layout = layout;
getThemeConfig.value.isDrawer = false;
initLayoutStyle();
initSetLayoutChange();
};
const initLayoutStyle = () => {
console.log(getThemeConfig);
// 设置布局切换，重置主题样式
const initSetLayoutChange = () => {
if (getThemeConfig.value.layout === "classic") {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = false;
@ -450,10 +456,7 @@ export default defineComponent({
getThemeConfig.value.menuBarColor = "#606266";
getThemeConfig.value.topBar = "#ffffff";
getThemeConfig.value.topBarColor = "#606266";
onBgColorPickerChange("menuBar");
onBgColorPickerChange("menuBarColor");
onBgColorPickerChange("topBar");
onBgColorPickerChange("topBarColor");
initLayoutChangeFun();
} else if (getThemeConfig.value.layout === "transverse") {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = false;
@ -461,9 +464,7 @@ export default defineComponent({
getThemeConfig.value.menuBarColor = "#FFFFFF";
getThemeConfig.value.topBar = "#545c64";
getThemeConfig.value.topBarColor = "#FFFFFF";
onBgColorPickerChange("topBar");
onBgColorPickerChange("menuBarColor");
onBgColorPickerChange("topBarColor");
initLayoutChangeFun();
} else if (getThemeConfig.value.layout === "columns") {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = true;
@ -472,10 +473,7 @@ export default defineComponent({
getThemeConfig.value.menuBarColor = "#606266";
getThemeConfig.value.topBar = "#ffffff";
getThemeConfig.value.topBarColor = "#606266";
onBgColorPickerChange("menuBar");
onBgColorPickerChange("menuBarColor");
onBgColorPickerChange("topBar");
onBgColorPickerChange("topBarColor");
initLayoutChangeFun();
} else {
getThemeConfig.value.isShowLogo = false;
getThemeConfig.value.isBreadcrumb = true;
@ -484,14 +482,18 @@ export default defineComponent({
getThemeConfig.value.menuBarColor = "#FFFFFF";
getThemeConfig.value.topBar = "#FFFFFF";
getThemeConfig.value.topBarColor = "#606266";
initLayoutChangeFun();
}
};
// 设置布局切换函数
const initLayoutChangeFun = () => {
onBgColorPickerChange("menuBar");
onBgColorPickerChange("menuBarColor");
onBgColorPickerChange("topBar");
onBgColorPickerChange("topBarColor");
}
};
onBeforeMount(() => {
initLayoutStyle();
initSetLayoutChange();
proxy.mittBus.on("onMenuClick", () => {
onMenuBarHighlightChange();
});

8
vue-admin-wonderful-next/src/views/layout/navBars/index.vue
View File

@ -1,8 +1,7 @@
<template>
<div class="layout-navbars-container">
<BreadcrumbIndex />
<TagsView
v-if="getThemeConfig.layout === 'defaults' || getThemeConfig.layout === 'transverse' || getThemeConfig.layout === 'columns'" />
<TagsView v-if="setShowTagsView" />
</div>
</template>
@ -19,8 +18,13 @@ export default {
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
const setShowTagsView = computed(() => {
let { layout } = store.state.themeConfig;
return layout !== "classic";
});
return {
getThemeConfig,
setShowTagsView,
};
},
};

12
vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
View File

@ -7,6 +7,8 @@
@contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
:ref="el => { if (el) tagsRefs[k] = el }">
<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v.path)"></i>
<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.icon"
v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
<span>{{v.name}}</span>
<template v-if="isActive(v.path)">
<i class="el-icon-refresh-right ml5"></i>
@ -53,11 +55,11 @@ export default {
},
tagsRefsIndex: 0,
arr2: [
{ id: 11, name: "微软", path: "/home" },
{ id: 12, name: "文档", path: "/docs" },
{ id: 13, name: "文档1", path: "/docs1" },
{ id: 15, name: "文档2", path: "/docs2" },
{ id: 1, name: "文档3", path: "/docs3" },
{ id: 11, name: "微软", path: "/home", icon: "el-icon-star-off" },
{ id: 12, name: "文档", path: "/docs", icon: "el-icon-camera" },
{ id: 13, name: "文档1", path: "/docs1", icon: "el-icon-truck" },
{ id: 15, name: "文档2", path: "/docs2", icon: "el-icon-tableware" },
{ id: 1, name: "文档3", path: "/docs3", icon: "el-icon-basketball" },
],
});
const setTagsStyle = computed(() => {