首次提交

src/layout/index.scss

@@ -34,20 +34,6 @@
                 opacity: .8;
             }
         }
-        .header-top-collapse-bar {
-            position: relative;
-            height: 100%;
-            font-size: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 0 10px;
-            cursor: pointer;
-            transition: opacity .2s;
-            &:hover {
-                opacity: 0.7;
-            }
-        }
         .header-top-menu-bar {
             position: relative;
             padding: 0 4px;
@@ -70,8 +56,8 @@
                 justify-content: center;
                 align-items: center;
                 cursor: pointer;
-                font-size: 25px;
-                margin-right: 8px;
+                font-size: 23px;
+                margin-right: 16px;
                 color: #efefef;
                 transition: color .2s;
                 &:hover {

src/layout/index.vue

@@ -11,8 +11,8 @@
             </div>
             <div class="header-top-menu-bar"/>
             <div class="header-content-bar">
-                <HelpInfoBar />
-                <ConfigBar />
+                <hc-color />
+                <hc-theme />
                 <UserInfoBar @load="userInfoLoad" />
             </div>
         </el-header>
@@ -55,11 +55,11 @@ const store = useAppStore()
 const reloadRouter = ref(true)
 
 //子组件
+import MenuBar from '~src/layout/modules/MenuBar.vue'
+import HcColor from './modules/Color.vue'
+import HcTheme from './modules/theme.vue'
 import UserInfoBar from './modules/UserInfoBar.vue'
-import HelpInfoBar from './modules/HelpInfoBar.vue'
 import RouterMenu from './modules/RouterMenu.vue'
-import ConfigBar from './modules/ConfigBar.vue'
-import MenuBar from '~src/layout/modules/MenuBar.vue'
 const appLogoName = ref(store.getLogoName)
 
 //菜单数据

src/layout/modules/Color.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="header-icon-bar">
+        <hc-icon name="palette" class="header-icon" />
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/modules/ConfigBar.vue

@@ -1,17 +0,0 @@
-<template>
-    <div class="header-icon-bar" @click="toConfigClick">
-        <HcIcon name="settings" class="header-icon" />
-    </div>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router'
-const router = useRouter()
-
-//跳转到系统设置页面
-const toConfigClick = () => {
-    router.push({
-        path: '/home/config',
-    })
-}
-</script>

src/layout/modules/HcTopMenu.vue

@@ -1,84 +0,0 @@
-<template>
-    <el-scrollbar>
-        <div class="hc-header-top-menu-bar">
-            <template v-for="(item, index) in topMenuData" :key="index">
-                <div class="item" :class="curKey === item?.code ? 'cur' : '' " @click="topMenuClick(item)">{{ item?.name }}</div>
-            </template>
-        </div>
-    </el-scrollbar>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useAppStore } from '~src/store'
-import HcTopMenu from '~src/plugins/HcTopMenu'
-import { getArrValue } from 'js-fast-way'
-
-const emit = defineEmits(['change', 'load'])
-
-//初始组合式
-const useRoutes = useRoute()
-const store = useAppStore()
-
-//处理菜单数据
-const setMenuItem = async (item) => {
-    emit('change', await HcTopMenu.setMenuItem(item))
-}
-
-//监听菜单数据
-const topMenuData = ref([])
-watch(() => store.getMenus, (val) => {
-    topMenuData.value = getArrValue(val)
-}, { immediate: true, deep: true })
-
-//监听路由数据
-const curKey = ref('')
-watch(() => useRoutes, (val) => {
-    HcTopMenu.initMenu({
-        routes: val,
-        menu: topMenuData.value,
-        load: (key) => {
-            curKey.value = key
-            emit('load', key)
-        },
-        change: (key, item) => {
-            curKey.value = key
-            setMenuItem(item)
-        },
-    })
-}, { immediate: true, deep: true })
-
-//菜单被点击
-const topMenuClick = (item) => {
-    setMenuItem(item)
-}
-</script>
-
-<style lang="scss">
-.hc-header-top-menu-bar {
-    position: relative;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    .item {
-        position: relative;
-        cursor: pointer;
-        padding: 6px 8px;
-        border-radius: 3px;
-        color: #efefef;
-        transition: background .2s, color .2s;
-        &:hover {
-            color: white;
-            background: var(--el-color-primary-dark-2);
-        }
-        &.cur {
-            color: white;
-            background: var(--el-color-primary-dark-2);
-        }
-    }
-    .item + .item {
-        margin-left: 2px;
-    }
-}
-</style>

src/layout/modules/HelpInfoBar.vue

@@ -1,141 +0,0 @@
-<template>
-    <el-popover :width="220" placement="bottom" trigger="hover">
-        <template #reference>
-            <div class="header-icon-bar">
-                <HcIcon class="header-icon" name="question" />
-            </div>
-        </template>
-        <div class="header-pover-menu-list">
-            <div class="list-item">
-                <span class="text">开启功能气泡提示</span>
-                <el-switch v-model="bubbleVal" @change="bubbleUpdate" />
-            </div>
-            <div v-if="excelUrl" class="list-item" @click="excelPreviewClick">
-                <span class="text">查看系统操作文档</span>
-                <img :src="getAssetsHomeFile('word.png')" alt="" class="icon">
-                <img :src="getAssetsHomeFile('word1.png')" alt="" class="icon1">
-            </div>
-            <div v-if="videoUrl" class="list-item" @click="videoPreviewModal = true">
-                <span class="text">当前页面功能讲解</span>
-                <img :src="getAssetsHomeFile('video.png')" alt="" class="icon">
-                <img :src="getAssetsHomeFile('video1.png')" alt="" class="icon1">
-            </div>
-        </div>
-    </el-popover>
-    <!-- 当前页面功能讲解 -->
-    <el-dialog v-model="videoPreviewModal" :before-close="videoPreviewModalClose" destroy-on-close width="62rem">
-        <video :src="videoUrl" autoplay="autoplay" class="preview-video" controls="controls">
-            您的浏览器不支持 video
-        </video>
-    </el-dialog>
-</template>
-
-<script setup>
-import { nextTick, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useAppStore } from '~src/store'
-import { getObjValue, getToObjVal } from 'js-fast-way'
-import { getStore } from 'hc-vue3-ui'
-
-//初始变量
-const useRoutes = useRoute()
-const useAppState = useAppStore()
-
-//相关变量
-const route = getObjValue(getStore('route'))
-const bubbleVal = ref(useAppState.getBubble)
-const videoUrl = ref('')
-const excelUrl = ref('')
-const videoPreviewModal = ref(false)
-
-//监听
-watch(() => [
-    useAppState.getBubble,
-    useRoutes.name,
-], ([Bubble, routeName]) => {
-    bubbleVal.value = Bubble
-    getVideoUrl(routeName)
-    getExcelUrl(routeName)
-})
-
-//渲染完成
-nextTick(() => {
-    getVideoUrl(useRoutes?.name)
-    getExcelUrl(useRoutes?.name)
-})
-
-//取文档地址
-const getExcelUrl = (name) => {
-    excelUrl.value = getToObjVal(route, name, 'excelUrl')
-}
-
-//取视频地址
-const getVideoUrl = (name) => {
-    videoUrl.value = getToObjVal(route, name, 'videoUrl')
-}
-
-//开关值改变
-const bubbleUpdate = (val) => {
-    bubbleVal.value = val
-    useAppState.setBubble(val)
-}
-
-// 获取assets静态资源
-const getAssetsHomeFile = (url) => {
-    const path = `../../assets/images/${url}`
-    const modules = import.meta.globEager('../../assets/images/*')
-    return modules[path].default
-}
-
-//关闭视频弹窗
-const videoPreviewModalClose = () => {
-    videoPreviewModal.value = false
-}
-
-//查看系统操作文档
-const excelPreviewClick = () => {
-    if (excelUrl.value) {
-        window.open(excelUrl.value, '_blank')
-    } else {
-        window?.$message.warning('暂无文档')
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.header-pover-menu-list {
-    position: relative;
-    margin: -5px -12px;
-    .list-item {
-        position: relative;
-        padding: 10px 24px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        transition: background-color 0.2s;
-        .text {
-            flex: auto;
-        }
-        .icon, .icon1 {
-            width: 24px;
-            height: 24px;
-        }
-        .icon1 {
-            display: none;
-        }
-        &:hover {
-            color: #ffffff;
-            background-color: var(--el-color-primary);
-            .icon {
-                display: none;
-            }
-            .icon1 {
-                display: block;
-            }
-        }
-    }
-}
-.preview-video {
-    width: 100%;
-}
-</style>

src/layout/modules/Theme.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="header-icon-bar" @click="toConfigClick">
+        <hc-icon name="t-shirt" class="header-icon" />
+    </div>
+</template>
+
+<script setup>
+const toConfigClick = () => {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/modules/UserInfoBar.vue

@@ -3,13 +3,13 @@
         <div class="header-bar user-info-bar">
             <img :alt="userInfo.account" :src="userInfo.avatar || avatarPng" class="user-avatar">
             <span class="user-name">{{ userInfo.real_name }}</span>
-            <HcIcon name="arrow-down-s" ui="arrow-icon" />
+            <hc-icon name="arrow-down-s" ui="arrow-icon" />
         </div>
         <template #dropdown>
             <el-dropdown-menu>
                 <el-dropdown-item v-for="item in options" :key="item.key">
                     <div class="hc-dropdown-item" @click="handleSelect(item.key)">
-                        <HcIcon :name="item.icon" class="icon" />
+                        <hc-icon :name="item.icon" class="icon" />
                         <span class="label">{{ item.label }}</span>
                     </div>
                 </el-dropdown-item>
@@ -82,7 +82,7 @@ const options = [
 
 const handleSelect = (key) => {
     if (key === 'my') {
-        router.push({ name: 'user-index' })
+        router.push({ name: 'user' })
     } else if (key === 'logout') {
         LogOut().then()
         window.$message?.info('退出成功')
@@ -98,8 +98,6 @@ const handleSelect = (key) => {
     align-items: center;
     height: 100%;
     cursor: pointer;
-    padding-left: 16px;
-    margin-left: 4px;
     outline: none;
     .user-avatar {
         width: 26px;
@@ -118,14 +116,6 @@ const handleSelect = (key) => {
         font-size: 20px;
         color: white;
     }
-    &::before {
-        position: absolute;
-        content: '';
-        left: 0;
-        width: 0;
-        height: 20px;
-        border-left: 1px solid #7291ff;
-    }
 }
 .hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .user-info-bar {
     color: inherit;
@@ -135,9 +125,6 @@ const handleSelect = (key) => {
     .arrow-icon {
         color: white;
     }
-    &::before {
-        border-left: 1px solid white;
-    }
 }
 
 .hc-dropdown-item {