1.新增头部深色浅色颜色切换功能

loulijun2021

2022-12-30 03e89ae339ff9da3c620fae212b89c302fea5997

1.新增头部深色浅色颜色切换功能

 src/components/Hamburger/index.vue

@@ -7,6 +7,7 @@
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
      :fill="$store.state.settings.headBackgroundColorValue?'#fff':'#000'"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>

 src/icons/svg/tree2.svg

 src/layout/components/Navbar.vue

@@ -1,5 +1,6 @@
<template>
  <div class="navbar">
  <!--  <div class="navbar">-->
  <div class="navbar" :style="{background: $store.state.settings.headBackgroundColorValue? '#304156':'#fff'}">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb class="breadcrumb-container" />
@@ -199,7 +200,7 @@
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  //background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  //background-color: #f8f8fa;

 src/layout/components/Settings/index.vue

@@ -8,6 +8,18 @@
        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
      </div>

      <div class="drawer-item" style="display: flex;justify-content: space-between">
        <span>头部颜色</span>
        <el-switch
          v-model="$store.state.settings.headBackgroundColorValue"
          style="display: block"
          active-color="#304156"
          inactive-color="#ccc"
          active-text="深色"
          inactive-text="浅色"
        />
      </div>

      <!--      此三个功能暂时不用-->
      <!--      <div class="drawer-item">-->
      <!--        <span>Open Tags-View</span>-->
@@ -92,7 +104,7 @@
  .drawer-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-size: 18px;
    line-height: 22px;
  }


 src/settings.js

@@ -24,6 +24,8 @@
   * @type {boolean} true | false
   * @description Whether need tagsView
   */
  tagsView: true
  tagsView: true,

  headBackgroundColorValue: false // 头部背景颜色

}

 src/store/modules/settings.js

@@ -1,9 +1,10 @@
import defaultSettings from '@/settings'
import variables from '@/styles/element-variables.scss'

const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const { showSettings, tagsView, fixedHeader, sidebarLogo, headBackgroundColorValue } = defaultSettings

const state = {
  headBackgroundColorValue: headBackgroundColorValue, // 头部背景颜色
  theme: variables.theme,
  showSettings: showSettings,
  fixedHeader: fixedHeader,