first

src/layout/components/aside.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-scrollbar class="scroll-sidebar" height="100vh">
+    <menus></menus>
+  </el-scrollbar>
+</template>
+<script>
+  import Menus from '@/layout/components/menu/index.vue'
+  import { defineComponent, ref, onMounted } from 'vue'
+
+  export default defineComponent({
+    name: 'GAside',
+    components: { Menus },
+  })
+</script>
+
+<style scoped>
+  .scroll-sidebar{
+    position: fixed;
+  }
+</style>

src/layout/components/header.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-icon class="ex-icon" @click="expandOrFoldSlider">
+    <el-icon-expand v-if="setting.sideIsCollapse"></el-icon-expand>
+    <el-icon-fold v-else></el-icon-fold>
+  </el-icon>
+  <div class="header-logo">
+    <img :src="setting.logo" alt="" class="logo">
+    <div class="title">{{setting.title}}</div>
+  </div>
+  <Setting></Setting>
+</template>
+
+<script>
+  import { defineComponent, computed } from 'vue'
+  import HeaderMenu from '@/layout/components/menu/index.vue'
+  import Setting from '@/layout/components/setting/index.vue'
+  import { useAppStore } from '@/store/app'
+  import GTags from '@/layout/components/tags/index.vue'
+
+  export default defineComponent({
+    name: 'LayerHeader',
+    created () {
+    },
+    components: { HeaderMenu, Setting, GTags },
+    watch: {},
+    setup (props) {
+      const appStore = useAppStore()
+      const setting = computed(() => appStore.setting)
+      const expandOrFoldSlider = () => {
+        appStore.sideCollapse()
+      }
+      return {
+        setting,
+        expandOrFoldSlider,
+      }
+    },
+
+  })
+</script>
+
+<style scoped lang="scss">
+  .ex-icon {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  .header-logo {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    .title {
+      display: block;
+      margin-left: 10px;
+    }
+
+    .logo {
+      display: block;
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+
+</style>
+<style lang="scss">
+
+</style>

src/layout/components/menu/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-menu
+          class="menus"
+          :collapse="isCollapse"
+          :default-active="activeIndex"
+          background-color="#2d3a4b"
+          text-color="#fff"
+          active-text-color="#409eff"
+          router
+  >
+    <menu-item v-for="(route,index) in routes" :key="route.name" :route="route"></menu-item>
+  </el-menu>
+</template>
+
+<script>
+  import { defineComponent, ref, onMounted, watch, computed } from 'vue'
+  import { useRouteStore } from '@/store/router'
+  import MenuItem from '@/layout/components/menu/item.vue'
+  import { useRoute } from 'vue-router'
+  import { useAppStore } from '@/store/app'
+
+  export default defineComponent({
+    name: 'Menu',
+    created () {
+    },
+    components: { MenuItem },
+    setup () {
+      const routes = ref([])
+      const route = useRoute()
+      const app = useAppStore()
+      const isCollapse = computed(() => app.setting.sideIsCollapse)
+      const activeIndex = computed(() => route.name)
+
+      routes.value = useRouteStore().routes
+      return {
+        routes,
+        activeIndex,
+        isCollapse,
+      }
+    },
+
+  })
+</script>
+
+<style lang="scss" scoped>
+  .menus {
+    min-height: 100vh;
+    border-right: none;
+    &:not(.el-menu--collapse) {
+      width: 210px;
+    }
+
+  }
+</style>
+<style>
+</style>

src/layout/components/menu/item.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-sub-menu v-if="route.children&&route.children.filter(c=>!c.meta?.hide).length>1&&route.children.some(r => !r.meta?.hide)"
+               :key="route.name"
+               :index="route.name"
+  >
+    <template #title>
+      <el-icon v-if="route.meta?.icon">
+        <component :is="`el-icon-${route.meta.icon}`"></component>
+      </el-icon>
+      <span>{{route.meta?.title||route.name}}</span>
+    </template>
+    <menu-item v-for="(_route,_index) in route.children"
+               :route="_route"
+               :key="_route.name">
+    </menu-item>
+  </el-sub-menu>
+  <el-menu-item v-else-if="!parseRoute(route).meta?.hide" :route="parseRoute(route)" :index="parseRoute(route).name">
+    <el-icon v-if="parseRoute(route).meta?.icon">
+      <component :is="`el-icon-${parseRoute(route).meta.icon}`"></component>
+    </el-icon>
+    <span>{{parseRoute(route).meta?.title||parseRoute(route).name}}</span>
+  </el-menu-item>
+</template>
+
+<script>
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    name: 'MenuItem',
+    props: {
+      route: {},
+    },
+    mounted () {
+    },
+    setup (props) {
+      //判断仅有一个子项的route
+      const parseRoute = (route) => {
+        if (route.children && route.children.filter(c => !c.meta?.hide).length === 1) {
+          return route.children.filter(c => !c.meta?.hide)[0]
+        } else {
+          return route
+        }
+      }
+      return {
+        parseRoute,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+</style>

src/layout/components/setting/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="setting">
+    <el-dropdown class="menu-item">
+      <div class="title">
+        <!--        <el-image class="avatar" :src="user.avatar"></el-image>-->
+        <span class="nickname">{{ user.username }}</span>
+        <el-icon>
+          <el-icon-arrow-down/>
+        </el-icon>
+      </div>
+
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="showChangePwd">修改密码</el-dropdown-item>
+          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <el-dialog v-model="changePwdVisible" width="50%">
+      <el-form ref="cpwd" :model="changePwdForm" :rules="chagePwdRules" label-width="120px" style="margin-top: 20px">
+        <el-form-item label="旧密码" prop="old_password">
+          <el-input v-model="changePwdForm.old_password" show-password></el-input>
+        </el-form-item>
+        <el-form-item label="新密码" prop="new_password">
+          <el-input v-model="changePwdForm.new_password" show-password></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPwd">
+          <el-input v-model="changePwdForm.confirmPwd" show-password></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="changePwdVisible=false">取消</el-button>
+          <el-button type="primary" @click="changePassword">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { useUserStore } from '@/store/user'
+  import { changeCurPwd } from '@/api/user'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { reactive, ref } from 'vue'
+
+  const userStore = useUserStore()
+  const user = userStore
+
+  const logout = () => {
+    userStore.logout()
+    window.location.reload()
+  }
+
+  const changePwdVisible = ref(false)
+  const showChangePwd = () => {
+    changePwdVisible.value = true
+    changePwdForm.old_password = ''
+    changePwdForm.new_password = ''
+    changePwdForm.confirmPwd = ''
+  }
+  const changePwdForm = reactive({
+    old_password: '',
+    new_password: '',
+    confirmPwd: '',
+  })
+  const chagePwdRules = reactive({
+    old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
+    new_password: [
+      { required: true, message: '请输入新密码', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value === changePwdForm.old_password) {
+            callback(new Error('新密码不能与旧密码相同'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      }],
+    confirmPwd: [
+      { required: true, message: '请再次输入新密码', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value !== changePwdForm.new_password) {
+            callback(new Error('两次输入密码不一致'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+  })
+  const cpwd = ref(null)
+  const changePassword = async () => {
+    //验证
+    const valid = await cpwd.value.validate().catch(_ => false)
+    if (!valid) {
+      return
+    }
+    console.log('changePassword')
+    const confirm = await ElMessageBox.confirm('确定修改密码么？', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).catch(_ => false)
+    if (!confirm) {
+      return
+    }
+    const res = await changeCurPwd(changePwdForm).catch(_ => false)
+    if (!res) {
+      return
+    }
+    ElMessageBox.alert('修改成功', '修改密码', {
+      autofocus: true,
+      confirmButtonText: 'OK',
+      callback: (action) => {
+        logout()
+      },
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+.setting {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .title {
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .nickname {
+      padding: 0 10px;
+    }
+  }
+}
+</style>

src/layout/components/tags/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-tag v-for="(t, i) in tags"
+          :key="t.name"
+          class="tag"
+          :closable="t.closeable"
+          @close="close(t)"
+          @click="toTag(t)"
+          :type="t.active?'primary':'info'"
+          :effect="t.active?'dark':'plain'">
+    {{t.title}}
+  </el-tag>
+</template>
+
+<script>
+  import { defineComponent, ref, onMounted, watch } from 'vue'
+  import { useTagsStore } from '@/store/tags'
+  import { useRoute, useRouter } from 'vue-router'
+
+  export default defineComponent({
+    name: 'Index',
+    setup () {
+      const tags = ref([])
+      const tagsStore = useTagsStore()
+      const route = useRoute()
+      const router = useRouter()
+      tags.value = tagsStore.tags
+
+      const addTag = (route) => {
+        if (!route.meta?.hide && route.name) {
+          tagsStore.addTag(route)
+        }
+      }
+      const close = (tag) => {
+        tagsStore.removeTag(tag)
+        if (tag.active) {
+          toLastTag()
+        }
+      }
+      const toLastTag = () => {
+        if (tags.value.length) {
+          router.push({ name: tags.value[tags.value.length - 1].name })
+        }
+      }
+      const init = () => {
+        if (!tagsStore.tags.length) {
+          tagsStore.initTags()
+        }
+        addTag(route)
+      }
+
+      const toTag = (tag) => {
+        if (tag.name !== route.name) {
+          router.push({ name: tag.name })
+        }
+      }
+
+      onMounted(init)
+      watch(route, (val) => {
+        addTag(val)
+      })
+      return {
+        tags,
+        addTag,
+        close,
+        toLastTag,
+        toTag,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+
+  .tag {
+    border-radius: 0;
+    cursor: pointer;
+    &.active {
+    }
+  }
+</style>

src/layout/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-container>
+    <el-aside :width="leftWidth" class="app-left">
+      <g-aside></g-aside>
+    </el-aside>
+    <el-container class="app-container ">
+      <el-header class="app-header">
+        <g-header></g-header>
+      </el-header>
+      <div class="header-tags">
+        <tags></tags>
+      </div>
+
+      <el-main class="app-main">
+        <router-view v-slot="{ Component }">
+          <transition mode="out-in" name="el-fade-in-linear">
+            <keep-alive :include="[...cachedTags]">
+              <component :is="Component"/>
+            </keep-alive>
+          </transition>
+        </router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+  import { useUserStore } from '@/store/user'
+  import { useRouteStore } from '@/store/router'
+  import { useAppStore } from '@/store/app'
+  import { useTagsStore } from '@/store/tags'
+  import LayerHeader from '@/layout/components/header.vue'
+  import { defineComponent, ref, onMounted, watch, reactive, computed, toRef } from 'vue'
+  import Tags from '@/layout/components/tags/index.vue'
+  import GAside from '@/layout/components/aside.vue'
+  import GHeader from '@/layout/components/header.vue'
+
+  export default defineComponent({
+    name: 'Layout',
+    components: { LayerHeader, Tags, GAside, GHeader },
+    setup (props) {
+      const userStore = useUserStore()
+      const appStore = useAppStore()
+      const tagStore = useTagsStore()
+
+      const leftWidth = computed(() => appStore.setting.sideIsCollapse ? '64px' : '210px')
+
+      const cachedTags = ref([])
+
+      cachedTags.value = tagStore.cached
+
+      return {
+        cachedTags,
+        leftWidth,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  .app-header {
+    background-color: #3f454b;
+    color: var(--basicWhite);
+    display: flex;
+    height: 50px;
+  }
+
+  .header-tags {
+    height: auto;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    padding: 0;
+  }
+
+  .app-left {
+    height: 100%;
+    transition: width 0.5s;
+  }
+
+  .app-container {
+    min-height: 100vh;
+  }
+</style>
+
+