Merge branch 'hutu'

Author: lpya

src/assets/iconfont/iconfont.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3001982 */
-  src: url('//at.alicdn.com/t/font_3001982_gtz8nwcwhtu.woff2?t=1642128452351') format('woff2'),
-       url('//at.alicdn.com/t/font_3001982_gtz8nwcwhtu.woff?t=1642128452351') format('woff'),
-       url('//at.alicdn.com/t/font_3001982_gtz8nwcwhtu.ttf?t=1642128452351') format('truetype');
+  src: url('//at.alicdn.com/t/font_3001982_5gxtvcz3vvk.woff2?t=1642402696715') format('woff2'),
+       url('//at.alicdn.com/t/font_3001982_5gxtvcz3vvk.woff?t=1642402696715') format('woff'),
+       url('//at.alicdn.com/t/font_3001982_5gxtvcz3vvk.ttf?t=1642402696715') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-skin-fill:before {
+  content: "\e865";
+}
+
+.icon-signal-fill:before {
+  content: "\e8e9";
+}
+
 .icon-sync:before {
   content: "\e786";
 }

src/components/Breadcrumb/Index.vue

@@ -3,13 +3,13 @@
  * @Author: hutu
  * @Date: 2021-12-13 08:41:23
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-21 17:12:21
+ * @LastEditTime: 2022-01-17 10:50:56
 -->
 <template>
   <div class="breadcrumb">
     <el-breadcrumb separator="/">
       <transition-group name="breadcrumb">
-        <el-breadcrumb-item v-for="(item, key) in state.leveList" :key="key" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
+        <el-breadcrumb-item v-for="(item, key) in state.leveList" :key="key" :to="{ path: key === 1 ? '' : item.path }">{{ item.title }}</el-breadcrumb-item>
       </transition-group>
     </el-breadcrumb>
   </div>

src/components/Hamburger/Index.vue

@@ -3,7 +3,7 @@
  * @Author: hutu
  * @Date: 2021-12-22 14:53:31
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-30 08:46:09
+ * @LastEditTime: 2022-01-17 15:53:02
 -->
 <template>
   <div class="hamburger" @click="emitMenuCollapse">
@@ -15,7 +15,7 @@ const props = defineProps<{
   collapse: boolean
 }>()
 const emit = defineEmits(['emitMenuCollapse'])
-const emitMenuCollapse = (): void => {
+const emitMenuCollapse = () => {
   emit('emitMenuCollapse', !props.collapse)
 }
 </script>

src/components/HeaderIcon/Index.vue

@@ -3,11 +3,11 @@
  * @Author: hutu
  * @Date: 2021-12-22 15:59:15
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-30 08:48:03
+ * @LastEditTime: 2022-01-17 15:52:03
 -->
 <template>
   <el-tooltip class="item" effect="dark" :content="props.title" placement="bottom">
-    <div class="header-icon">
+    <div class="header-icon" @click="emitClick">
       <el-icon class="iconfont" :class="props.icon"></el-icon>
     </div>
   </el-tooltip>
@@ -17,6 +17,10 @@ const props = defineProps<{
   title: string
   icon: string
 }>()
+const emit = defineEmits(['emitClick'])
+const emitClick = () => {
+  emit('emitClick')
+}
 </script>
 <style lang="scss">
 .header-icon {

src/components/SkinTheme/Index.vue

@@ -0,0 +1,61 @@
+<!--
+ * @Description: 换肤
+ * @Author: hutu
+ * @Date: 2022-01-17 15:36:50
+ * @LastEditors: hutu
+ * @LastEditTime: 2022-01-17 15:40:17
+-->
+<template>
+  <div class="skin-theme">
+    <div class="theme-color">
+      <div class="theme-color-label">头部背景颜色</div>
+      <div><el-color-picker v-model="styles.headerBg" /></div>
+    </div>
+    <div class="theme-color">
+      <div class="theme-color-label">主体内容背景颜色</div>
+      <div><el-color-picker v-model="styles.mainBg" /></div>
+    </div>
+    <div class="theme-color">
+      <div class="theme-color-label">侧边栏背景颜色</div>
+      <div><el-color-picker v-model="styles.sidebarBg" /></div>
+    </div>
+    <div class="theme-color">
+      <div class="theme-color-label">菜单栏背景颜色</div>
+      <div><el-color-picker v-model="styles.menuBg" /></div>
+    </div>
+    <div class="theme-color">
+      <div class="theme-color-label">菜单栏字体颜色</div>
+      <div><el-color-picker v-model="styles.menuTextColor" /></div>
+    </div>
+    <div class="theme-color">
+      <div class="theme-color-label">菜单栏选中字体颜色</div>
+      <div><el-color-picker v-model="styles.menuTextActiveColor" /></div>
+    </div>
+    <div class="theme-color">
+      <div class="theme-color-label">子菜单栏背景颜色</div>
+      <div><el-color-picker v-model="styles.subMenuBg" /></div>
+    </div>
+    <div class="theme-color">
+      <div class="theme-color-label">子菜单栏悬浮颜色</div>
+      <div><el-color-picker v-model="styles.subMenuHover" /></div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+const store = useStore()
+const styles = computed(() => store.state.theme.styles)
+</script>
+<style lang="scss" scoped>
+.skin-theme {
+  .theme-color {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    &-label {
+      min-width: 150px;
+    }
+  }
+}
+</style>

src/layout/components/AppMain.vue

@@ -13,7 +13,6 @@
 .app-main {
   height: calc(100vh - 51px);
   width: 100%;
-  overflow: hidden;
 }
 .fade-leave-active,
 .fade-enter-active {

src/layout/components/Navbar.vue

@@ -3,7 +3,7 @@
  * @Author: hutu
  * @Date: 2021-12-09 22:36:40
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-30 08:56:09
+ * @LastEditTime: 2022-01-17 15:56:26
 -->
 <template>
   <div class="navbar">
@@ -15,8 +15,11 @@
       <HeaderIcon :icon="'icon-home'" :title="'主页'" />
       <Screenfull />
       <HeaderAvatar />
-      <HeaderIcon :icon="'icon-setting'" :title="'设置'" />
+      <HeaderIcon :icon="'icon-setting'" :title="'设置'" @emitClick="drawerFlag = true" />
     </div>
+    <el-drawer v-model="drawerFlag" title="自定义主题颜色" size="350px">
+      <SkinTheme style="padding-left: 20px" />
+    </el-drawer>
   </div>
 </template>
 <script lang="ts" setup>
@@ -25,19 +28,21 @@ import Hamburger from '@/components/Hamburger/Index.vue'
 import Screenfull from '@/components/Screenfull/Index.vue'
 import HeaderAvatar from '@/components/HeaderAvatar/Index.vue'
 import HeaderIcon from '@/components/HeaderIcon/Index.vue'
+import SkinTheme from '@/components/SkinTheme/Index.vue'
 
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
 import { SET_MENU_COLLAPSE } from '@/store/type'
 
+const drawerFlag = ref<boolean>(false)
 const store = useStore()
 const menuCollapse = computed(() => store.state.permission.menuCollapse)
 /**
  * @desc:  侧边栏展开||折叠
  * @param {boolean} flag
- * @return {void}
+ * @return {*}
  */
-const handleMenuCollapse = (flag: boolean): void => {
+const handleMenuCollapse = (flag: boolean) => {
   store.commit(SET_MENU_COLLAPSE, flag)
 }
 </script>

src/main.ts

@@ -6,7 +6,7 @@ import '@/styles/index.scss' //全局样式
 import '@/assets/iconfont/iconfont.scss'
 const app = createApp(App)
 
-import { ElDialog, ElConfigProvider, ElPagination, ElLoading, ElTag, ElButton, ElMenu, ElIcon, ElBreadcrumb, ElBreadcrumbItem, ElInput, ElForm, ElFormItem, ElTooltip, ElDropdown, ElDropdownItem, ElDropdownMenu, ElRow, ElCol, ElScrollbar, ElTable, ElTableColumn } from 'element-plus'
+import { ElDrawer, ElColorPicker, ElDialog, ElConfigProvider, ElPagination, ElLoading, ElTag, ElButton, ElMenu, ElIcon, ElBreadcrumb, ElBreadcrumbItem, ElInput, ElForm, ElFormItem, ElTooltip, ElDropdown, ElDropdownItem, ElDropdownMenu, ElRow, ElCol, ElScrollbar, ElTable, ElTableColumn } from 'element-plus'
 import 'element-plus/theme-chalk/index.css'
 app.use(ElButton)
 app.use(ElMenu)
@@ -30,6 +30,8 @@ app.use(ElLoading)
 app.use(ElPagination)
 app.use(ElConfigProvider)
 app.use(ElDialog)
+app.use(ElColorPicker)
+app.use(ElDrawer)
 import './permission'
 
 import './mock/index'

src/router/asyncRoutes.ts

@@ -1,10 +1,11 @@
 /*
- * @Descripttion:
+ * @Description:模拟动态路由
  * @Author: hutu
- * @Date: 2021-12-07 08:36:02
+ * @Date: 2022-01-13 16:57:13
  * @LastEditors: hutu
- * @LastEditTime: 2022-01-13 09:04:03
+ * @LastEditTime: 2022-01-17 14:58:26
  */
+
 import { IAsyncRoutes } from '@/interface/index'
 /**
  * 模拟请求后的路由数据
@@ -41,6 +42,18 @@ export const asyncRoutes: IAsyncRoutes[] = [
       }
     ]
   },
+  {
+    father: 'sys.blog',
+    identifier: 'charts',
+    title: '图表',
+    type: 'menu',
+    url: '/charts',
+    icon: 'icon-signal-fill',
+    children: [
+      { father: 'charts', identifier: 'bar', title: '柱状图', type: 'menu', url: '/bar', icon: 'icon-signal-fill' },
+      { father: 'charts', identifier: 'line', title: '折线图', type: 'menu', url: '/line', icon: 'icon-signal-fill' }
+    ]
+  },
   {
     father: 'sys.blog',
     identifier: 'table',
@@ -53,5 +66,5 @@ export const asyncRoutes: IAsyncRoutes[] = [
       { father: 'table', identifier: 'complex-table', title: '综合表格', type: 'menu', url: '/complex-table', icon: 'icon-table' }
     ]
   },
-  { father: 'sys.blog', identifier: 'attachment', title: '附件管理', type: 'menu', url: '/attachment', icon: 'icon-folder' }
+  { father: 'sys.blog', identifier: 'theme', title: '换肤', type: 'menu', url: '/theme', icon: 'icon-skin-fill' }
 ]

src/store/modules/permission.ts

@@ -3,7 +3,7 @@
  * @Author: hutu
  * @Date: 2021-12-21 16:57:25
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-24 17:26:54
+ * @LastEditTime: 2022-01-17 15:52:39
  */
 import { IAsyncRoutes, IPermission } from '@/interface'
 import { SET_ROUTES, GENERATE_ROUTES, SET_MENU_COLLAPSE } from '../type'
@@ -19,11 +19,11 @@ const state: IPermission = {
 }
 const mutations = {
   //设置路由
-  [SET_ROUTES]: (state: IPermission, routes: RouteRecordRaw[]): void => {
+  [SET_ROUTES]: (state: IPermission, routes: RouteRecordRaw[]) => {
     state.accessRoutes = routes
   },
   //设置侧边栏折叠、展开
-  [SET_MENU_COLLAPSE]: (state: IPermission, flag: boolean): void => {
+  [SET_MENU_COLLAPSE]: (state: IPermission, flag: boolean) => {
     state.menuCollapse = flag
   }
 }