From 39778d96290d29173bce60e64f4bb23df14d46a7 Mon Sep 17 00:00:00 2001 From: lyt <1105290566@qq.com> Date: Mon, 11 Jan 2021 18:48:34 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.01.11:=E6=96=B0=E5=A2=9EtagsView?= =?UTF-8?q?=E6=98=BE=E7=A4=BA/=E9=9A=90=E8=97=8F=E5=9B=BE=E6=A0=87'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue-admin-wonderful-next/src/App.vue | 1 + vue-admin-wonderful-next/src/store/index.ts | 1 + .../src/theme/common/var.scss | 2 +- .../src/utils/themeConfig.ts | 3 +- .../src/utils/wartermark.ts | 1 - .../views/layout/component/columnsAside.vue | 2 +- .../src/views/layout/footer/index.vue | 1 + .../src/views/layout/logo/index.vue | 2 +- .../src/views/layout/main/transverse.vue | 4 +- .../views/layout/navBars/breadcrumb/index.vue | 24 +++++++--- .../layout/navBars/breadcrumb/setings.vue | 44 ++++++++++--------- .../src/views/layout/navBars/index.vue | 8 +++- .../layout/navBars/tagsView/tagsView.vue | 12 ++--- 13 files changed, 63 insertions(+), 42 deletions(-) diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue index d75c68a..406c134 100644 --- a/vue-admin-wonderful-next/src/App.vue +++ b/vue-admin-wonderful-next/src/App.vue @@ -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"]); }); diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts index 1dd83f5..f980d1a 100644 --- a/vue-admin-wonderful-next/src/store/index.ts +++ b/vue-admin-wonderful-next/src/store/index.ts @@ -28,6 +28,7 @@ export interface RootStateTypes { isShowLogoChange: boolean, isBreadcrumb: boolean, isTagsview: boolean, + isTagsviewIcon: boolean, isFooter: boolean, isGrayscale: boolean, isInvert: boolean, diff --git a/vue-admin-wonderful-next/src/theme/common/var.scss b/vue-admin-wonderful-next/src/theme/common/var.scss index 6fbdcfc..46db272 100644 --- a/vue-admin-wonderful-next/src/theme/common/var.scss +++ b/vue-admin-wonderful-next/src/theme/common/var.scss @@ -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; diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts index 78a1d40..bdfa254 100644 --- a/vue-admin-wonderful-next/src/utils/themeConfig.ts +++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts @@ -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, diff --git a/vue-admin-wonderful-next/src/utils/wartermark.ts b/vue-admin-wonderful-next/src/utils/wartermark.ts index d7cc762..89b32a8 100644 --- a/vue-admin-wonderful-next/src/utils/wartermark.ts +++ b/vue-admin-wonderful-next/src/utils/wartermark.ts @@ -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: () => { diff --git a/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue b/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue index 93f4e6b..f74b9a1 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue @@ -12,7 +12,7 @@ \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue index 0f8540c..c8c0670 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue @@ -1,9 +1,8 @@ @@ -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), }; }, diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue index 0d8e933..1532a8f 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue @@ -161,6 +161,12 @@ +
+
开启 Tagsview 图标
+
+ +
+
开启 Footer
@@ -290,12 +296,12 @@
- + 一键复制配置 - 一键恢复默认 + 一键还原配置
@@ -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"; - onBgColorPickerChange("menuBar"); - onBgColorPickerChange("menuBarColor"); - onBgColorPickerChange("topBar"); - onBgColorPickerChange("topBarColor"); + initLayoutChangeFun(); } }; + // 设置布局切换函数 + const initLayoutChangeFun = () => { + onBgColorPickerChange("menuBar"); + onBgColorPickerChange("menuBarColor"); + onBgColorPickerChange("topBar"); + onBgColorPickerChange("topBarColor"); + }; onBeforeMount(() => { - initLayoutStyle(); + initSetLayoutChange(); proxy.mittBus.on("onMenuClick", () => { onMenuBarHighlightChange(); }); diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/index.vue b/vue-admin-wonderful-next/src/views/layout/navBars/index.vue index 35a819b..9230305 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/index.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/index.vue @@ -1,8 +1,7 @@ @@ -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, }; }, }; diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue index 11d8698..7d464df 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue @@ -7,6 +7,8 @@ @contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)" :ref="el => { if (el) tagsRefs[k] = el }"> + {{v.name}}