Skip to content

Commit

Permalink
Merge branch 'main' of github.com:dyggod/vue2-template
Browse files Browse the repository at this point in the history
  • Loading branch information
dyggod committed Jul 4, 2022
2 parents 9402926 + 56fe8fb commit ca780c4
Show file tree
Hide file tree
Showing 21 changed files with 295 additions and 44 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
camelcase: ['error', {
properties: 'never',
}],
'vuejs-accessibility/click-events-have-key-events': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
'no-unused-vars': 'warn',
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"less-loader": "^6.1.1",
"lint-staged": "^13.0.1",
"standard-version": "^9.5.0",
"postcss-pxtorem": "^5.1.1",
"style-resources-loader": "^1.5.0",
"vue-cli-plugin-style-resources-loader": "^0.1.5",
"vue-template-compiler": "^2.6.14"
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="popContainer" class="beauty-scroll" style="height: 100vh; overflow-y: scroll">
<div id="popContainer" class="beauty-scroll" style="height: 100vh;">
<div id="app"></div>
</div>
<!-- built files will be auto injected -->
Expand Down
16 changes: 16 additions & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,24 @@
<script>
import { pinia } from '@store';
import settingsStore from '@/store/modules/settings';
import userStore from '@/store/modules/user';
export default {
name: 'App',
data() {
return {
locale: {},
store: settingsStore(pinia),
userStore: userStore(pinia),
};
},
computed: {
language() {
return this.store.language;
},
loginStatus() {
return this.userStore.loginStatus;
},
},
methods: {
popContainer() {
Expand All @@ -40,6 +45,17 @@ export default {
break;
}
},
// 监听 loginStatus 变化
loginStatus(loginStatus) {
if (loginStatus) {
this.$message.success('登录成功');
} else {
this.$message.error(this.$t('app.logout.msg'));
setTimeout(() => {
window.location.reload();
}, 1000);
}
},
},
};
</script>
Expand Down
61 changes: 61 additions & 0 deletions src/layout/header/HeaderAvatar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<template>
<a-dropdown>
<div class="header-avatar" style="cursor: pointer">
<a-avatar class="avatar" size="small" shape="circle" icon="user"/>
<span class="name">{{userInfo.name}}</span>
</div>
<a-menu :class="['avatar-menu']" slot="overlay">
<a-menu-item>
<a-icon type="user" />
<span>个人中心</span>
</a-menu-item>
<a-menu-item>
<a-icon type="setting" />
<span>设置</span>
</a-menu-item>
<a-menu-divider />
<a-menu-item @click="clickLogout">
<a-icon style="margin-right: 8px;" type="poweroff" />
<span>退出登录</span>
</a-menu-item>
</a-menu>
</a-dropdown>
</template>

<script>
import { mapState, mapActions } from 'pinia';
import store from '@store/modules/index';
export default {
name: 'HeaderAvatar',
computed: {
...mapState(store.userStore, ['userInfo']),
},
methods: {
...mapActions(store.userStore, ['logout']),
clickLogout() {
this.logout();
},
},
};
</script>

<style lang="less" scoped>
.header-avatar {
display: inline-flex;
.avatar, .name {
align-self: center;
}
.avatar {
margin-right: 8px;
background: @primary-color;
}
.name {
font-weight: 500;
}
}
.avatar-menu {
width: 150px;
}
</style>
26 changes: 26 additions & 0 deletions src/layout/header/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
@import '../index.less';

#layout-header.layout-right-header {
height: @header-height;
background-color: #fff;
padding-left: @pd-left-16;
display: flex;
justify-content: space-between;

.trigger {
display: flex;
align-items: center;
}

.header-right-content {
display: flex;
align-items: center;
}

.header-item {
color: inherit;
cursor: pointer;
align-self: center;
padding: 0 12px;
}
}
48 changes: 24 additions & 24 deletions src/layout/header/index.vue
Original file line number Diff line number Diff line change
@@ -1,25 +1,30 @@
<template>
<a-layout-header id="layout-header" class="layout-right-header">
<div>
<div class="trigger">
<a-icon
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="toggleCollapsed"
/>
</div>
<div>
<!-- 国际化选项 -->
<div class="header-right-content">
<!-- 用户 -->
<div class="avatar">
<HeaderAvatar class="avatar header-item"></HeaderAvatar>
</div>
<div>
<a-dropdown class="lang header-item">
<div>
<a-icon type="global"/> {{ langAlias }}
</div>
<a-menu @click="val => setLang(val.key)" :selected-keys="[language]" slot="overlay">
<a-menu-item v-for=" (lang) in languageList" :key="lang.value">
{{lang.value.toLowerCase() + ' ' + lang.label}}
</a-menu-item>
</a-menu>
</a-dropdown>
<!-- 国际化选项 -->
<div>
<a-dropdown class="lang header-item">
<div>
<a-icon type="global"/> {{ langAlias }}
</div>
<a-menu @click="val => setLang(val.key)" :selected-keys="[language]" slot="overlay">
<a-menu-item v-for=" (lang) in languageList" :key="lang.value">
{{lang.value.toLowerCase() + ' ' + lang.label}}
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
</div>
</a-layout-header>
Expand All @@ -29,9 +34,13 @@
import { mapState, mapActions } from 'pinia';
import store from '@/store/modules/index';
import { localeOptions } from '@/locales';
import HeaderAvatar from './HeaderAvatar.vue';
export default {
name: 'LayoutHeader',
components: {
HeaderAvatar,
},
props: {
collapsed: {
type: Boolean,
Expand Down Expand Up @@ -62,14 +71,5 @@ export default {
</script>

<style lang="less" scoped>
#layout-header.layout-right-header {
background-color: #fff;
padding-left: 16px;
display: flex;
justify-content: space-between;
.header-item {
padding: 0 12px;
}
}
@import './index.less';
</style>
16 changes: 16 additions & 0 deletions src/layout/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@header-height: 64px;
@pd-left-16: 16px;

.layout-right {
height: 100vh;
}

.layout-right-content {
padding-left: @pd-left-16;
max-height: calc(100vh - @header-height);
overflow-y: scroll;

#layout-main {
// height: 100%;
}
}
35 changes: 24 additions & 11 deletions src/layout/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
<Header :collapsed="collapsed" @toggle="toggle"></Header>
<a-layout-content class="layout-right-content">
<div>
<Main></Main>
<Main>
<template #headbread>
<HeaderBread :levelList="breadcrumb"/>
</template>
</Main>
</div>
</a-layout-content>
</a-layout>
Expand All @@ -16,31 +20,40 @@
import SideMenu from './menu/index.vue';
import Header from './header/index.vue';
import Main from './main/index.vue';
import HeaderBread from './main/HeaderBread.vue';
export default {
name: 'LayoutPage',
components: { SideMenu, Header, Main },
components: {
SideMenu, Header, HeaderBread, Main,
},
data() {
return {
collapsed: false,
levelList: [],
};
},
computed: {
breadcrumb() {
return this.getBreadVal();
},
},
methods: {
toggle() {
this.collapsed = !this.collapsed;
},
getBreadVal() {
const matched = this.$route.matched.filter(
(item) => item.meta && item.meta.title,
);
return matched.filter(
(item) => item.meta && item.meta.title,
);
},
},
};
</script>

<style lang="less" scoped>
@pd-left: 16px;
.layout-right {
// padding-left: 16px;
}
.layout-right-content {
padding-left: @pd-left;
}
@import './index.less';
</style>
26 changes: 26 additions & 0 deletions src/layout/main/HeaderBread.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<div>
<a-breadcrumb>
<a-breadcrumb-item v-for="(breaditem, key) in levelList" :key="key">
{{ breaditem.meta.title }}
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>

<script>
export default {
data() {
return {};
},
props: {
levelList: {
type: Array,
default: () => [],
},
},
};
</script>

<style lang="less" scoped>
</style>
9 changes: 6 additions & 3 deletions src/layout/main/index.vue
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
<template>
<router-view>
<div>
<slot name="headbread"></slot>
<router-view class="layout-main">
<template #default="{ Component, route }">
<transition>
<component :is="Component" :key="route.fullPath" />
</transition>
</template>
</router-view>
</div>
</template>

<script>
export default {
name: 'LayoutMain',
};
</script>

<style>
<style lang="less" scoped>
</style>
1 change: 1 addition & 0 deletions src/layout/menu/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
min-height: 100vh;
overflow-y: auto;
z-index: 10;
width: 192 !important;

.logo {
height: 64px;
Expand Down
3 changes: 3 additions & 0 deletions src/locales/lang/en-US.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
export default {
'app.login.success': 'login success',
'app.login.fail': 'login fail',
'app.logout.msg': 'about to log out',
'menu.test': 'MenuTest',
'menu.systemName': 'Password Service',
};
3 changes: 3 additions & 0 deletions src/locales/lang/zh-CN.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
export default {
'app.login.success': '登录成功',
'app.login.fail': '登录失败',
'app.logout.msg': '即将退出账号',
'menu.test': '菜单测试',
'menu.systemName': '密码服务平台',
};
1 change: 1 addition & 0 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { pinia } from '@/store';
import store from '@/store/modules';
import { setAppOptions } from '@/router/utils';
import { initI18n, LOCALES } from '@/locales';
import './utils/rem';
import './theme/index.less';

/**
Expand Down
Loading

0 comments on commit ca780c4

Please sign in to comment.