布局

src/components/auth-btn/index.js

@@ -0,0 +1,13 @@
+import {useAppStore} from "~src/store";
+const store = useAppStore();
+
+//自定义权限指令
+export const vAuthBtn = {
+    mounted(el, {value}) {
+        if (value && value.length > 0 && value[0]) {
+            if (el.parentNode && !store.getButtonsVal(value[0])) {
+                el.parentNode.removeChild(el);
+            }
+        }
+    }
+}

src/components/index.js

@@ -1,5 +1,8 @@
+import {vAuthBtn} from './auth-btn/index'
 
 //注册全局组件
 export const setupComponents = (App) => {
     //App.component('HcTooltip', HcTooltip)
+    //自定义指令
+    App.directive('auth-btn', vAuthBtn)
 }

src/layout/modules/Color.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="header-icon-bar">
-        <hc-icon name="palette" class="header-icon" />
+        <el-tooltip content="主色调" placement="top">
+            <hc-icon name="palette" class="header-icon" />
+        </el-tooltip>
     </div>
 </template>
 

src/layout/modules/Refresh.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="header-icon-bar">
-        <hc-icon name="refresh" class="header-icon" />
+        <el-tooltip content="强刷新" placement="top">
+            <hc-icon name="refresh" class="header-icon" />
+        </el-tooltip>
     </div>
 </template>
 

src/layout/modules/Theme.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="header-icon-bar" @click="toConfigClick">
-        <hc-icon name="t-shirt" class="header-icon" />
+        <el-tooltip content="主题皮肤" placement="top">
+            <hc-icon name="t-shirt" class="header-icon" />
+        </el-tooltip>
     </div>
 </template>