新增加系统配置文件

2021-09-29 15:57:56 +08:00
parent 2b263fb64d
commit 2b10934e09
15 changed files with 378 additions and 75 deletions
--- a/ZR.Vue/src/layout/components/Settings/index.vue
+++ b/ZR.Vue/src/layout/components/Settings/index.vue
@@ -1,13 +1,38 @@
 <template>
  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">系统布局配置</h3>
+    <div class="setting-drawer-content">
+      <div class="setting-drawer-title">
+        <h3 class="drawer-title">主题风格设置</h3>
+      </div>
+      <div class="setting-drawer-block-checbox">
+        <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
+          <img src="@/assets/image/dark.svg" alt="dark">
+          <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+            <i aria-label="图标: check" class="anticon anticon-check">
+              <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
+                <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
+              </svg>
+            </i>
+          </div>
+        </div>
+        <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
+          <img src="@/assets/image/light.svg" alt="light">
+          <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+            <i aria-label="图标: check" class="anticon anticon-check">
+              <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
+                <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
+              </svg>
+            </i>
+          </div>
+        </div>
+      </div>

      <div class="drawer-item">
        <span>主题颜色</span>
        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
      </div>

+      <el-divider/>
      <div class="drawer-item">
        <span>开启 Tags-Views</span>
        <el-switch v-model="tagsView" class="drawer-switch" />
@@ -22,66 +47,143 @@
        <span>显示 Logo</span>
        <el-switch v-model="sidebarLogo" class="drawer-switch" />
      </div>
+      <el-divider />

+      <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
+      <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
    </div>
  </div>
 </template>

 <script>
-import ThemePicker from '@/components/ThemePicker'
+import ThemePicker from "@/components/ThemePicker";

 export default {
  components: { ThemePicker },
  data() {
-    return {}
+    return {
+      theme: this.$store.state.settings.theme,
+      sideTheme: this.$store.state.settings.sideTheme,
+    };
  },
  computed: {
    fixedHeader: {
      get() {
-        return this.$store.state.settings.fixedHeader
+        return this.$store.state.settings.fixedHeader;
      },
      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
+        this.$store.dispatch("settings/changeSetting", {
+          key: "fixedHeader",
+          value: val,
+        });
+      },
    },
    tagsView: {
      get() {
-        return this.$store.state.settings.tagsView
+        return this.$store.state.settings.tagsView;
      },
      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
+        this.$store.dispatch("settings/changeSetting", {
+          key: "tagsView",
+          value: val,
+        });
+      },
    },
    sidebarLogo: {
      get() {
-        return this.$store.state.settings.sidebarLogo
+        return this.$store.state.settings.sidebarLogo;
      },
      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
+        this.$store.dispatch("settings/changeSetting", {
+          key: "sidebarLogo",
+          value: val,
+        });
+      },
    },
  },
  methods: {
    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
+      this.$store.dispatch("settings/changeSetting", {
+        key: "theme",
+        value: val,
+      });
+    },
+    handleTheme(val) {
+      this.$store.dispatch("settings/changeSetting", {
+        key: "sideTheme",
+        value: val,
+      });
+      this.sideTheme = val;
+    },
+    // 保存配置好
+    saveSetting() {
+      // this.$modal.loading("正在保存到本地，请稍后...");
+      localStorage.setItem(
+        "layout-setting",
+        `{
+            "tagsView":${this.tagsView},
+            "fixedHeader":${this.fixedHeader},
+            "sidebarLogo":${this.sidebarLogo},
+            "sideTheme":"${this.sideTheme}",
+            "theme":"${this.theme}"
+          }`
+      );
+      this.msgSuccess("保存成功");
+      // setTimeout(this.$modal.closeLoading(), 1000);
+    },
+    resetSetting() {
+      // this.$modal.loading("正在清除设置缓存并刷新，请稍后...");
+      localStorage.removeItem("layout-setting");
+      setTimeout("window.location.reload()", 1000);
+    },
+  },
+};
 </script>

 <style lang="scss" scoped>
+.setting-drawer-content {
+  .setting-drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: bold;
+  }
+
+  .setting-drawer-block-checbox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+
+    .setting-drawer-block-checbox-item {
+      position: relative;
+      margin-right: 16px;
+      border-radius: 2px;
+      cursor: pointer;
+
+      img {
+        width: 48px;
+        height: 48px;
+      }
+
+      .setting-drawer-block-checbox-selectIcon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        padding-top: 15px;
+        padding-left: 24px;
+        color: #1890ff;
+        font-weight: 700;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
 .drawer-container {
  padding: 24px;
  font-size: 14px;
@@ -90,19 +192,20 @@ export default {

  .drawer-title {
    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
+    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 22px;
  }

  .drawer-item {
-    color: rgba(0, 0, 0, .65);
+    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    padding: 12px 0;
  }

  .drawer-switch {
-    float: right
+    float: right;
  }
 }
 </style>
+
--- a/ZR.Vue/src/layout/index.vue
+++ b/ZR.Vue/src/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classObj" class="app-wrapper">
+  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div :class="{hasTagsView:needTagsView}" class="main-container">
@@ -34,6 +34,8 @@ export default {
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
+      theme: state => state.settings.theme,
+      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
--- a/ZR.Vue/src/main.js
+++ b/ZR.Vue/src/main.js
@@ -15,15 +15,20 @@ import permission from './directive/permission'
 import './assets/icons' // icon
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
-// import { getConfigKey } from "@/api/system/config";
+import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/ruoyi";
+//分页组件
 import Pagination from "@/components/Pagination";
 //自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
+// 字典标签组件
+import DictTag from '@/components/DictTag'
+// 字典数据组件
+// import DictData from '@/components/DictData'

 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
-// Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime
 Vue.prototype.resetForm = resetForm
 Vue.prototype.addDateRange = addDateRange
@@ -47,6 +52,7 @@ Vue.prototype.msgInfo = function (msg) {
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
+Vue.component('DictTag', DictTag)

 Vue.use(permission)

--- a/ZR.Vue/src/settings.js
+++ b/ZR.Vue/src/settings.js
@@ -1,8 +1,12 @@
 module.exports = {
  title: 'ZrAdmin.NET',
+  /**
+   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   */
+   sideTheme: 'theme-dark',

  /**
-   * 是否系统布局配置
+   * 显示是否系统布局配置
   */
  showSettings: false,

--- a/ZR.Vue/src/store/modules/settings.js
+++ b/ZR.Vue/src/store/modules/settings.js
@@ -1,14 +1,17 @@
-import variables from '@/assets/styles/element-variables.scss'
 import defaultSettings from '@/settings'

-const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const { sideTheme, showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings

+const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
-  theme: variables.theme,
+  theme: storageSetting.theme || '#409EFF',
+  sideTheme: storageSetting.sideTheme || sideTheme,
  showSettings: showSettings,
-  tagsView: tagsView,
-  fixedHeader: fixedHeader,
-  sidebarLogo: sidebarLogo
+  tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
+  fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
+  sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
+  // topNav:  storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
+  // dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
 }

 const mutations = {
@@ -20,6 +23,7 @@ const mutations = {
 }

 const actions = {
+  //修改布局设置
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
--- a/ZR.Vue/src/utils/request.js
+++ b/ZR.Vue/src/utils/request.js
@@ -57,6 +57,8 @@ service.interceptors.response.use(res => {
        location.href = '/index';
      })
    })
+
+    return Promise.reject()
  }
  else if (code == 0 || code == 110 || code == 101 || code == 403 || code == 500) {
    Message({
@@ -91,8 +93,6 @@ service.interceptors.response.use(res => {
  }
 )

-
-
 /**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
--- a/ZR.Vue/src/views/system/user/index.vue
+++ b/ZR.Vue/src/views/system/user/index.vue
@@ -346,9 +346,9 @@ export default {
    this.getDicts("sys_user_sex").then((response) => {
      this.sexOptions = response.data;
    });
-    // this.getConfigKey("sys.user.initPassword").then(response => {
-    //   this.initPassword = response.msg;
-    // });
+    this.getConfigKey("sys.user.initPassword").then(response => {
+      this.initPassword = response.data;
+    });
  },
  methods: {
    /** 查询用户列表 */