Skip to content

A
ant-design-pro-vue
Commit 71049876 by Sendya
Options

add: account page

parent 7a076098
Showing with 530 additions and 171 deletions
src/components/menu/index.js
......@@ -86,9 +86,11 @@ export default {
) ]
let itemArr = []
let pIndex_ = pIndex + '_' + index
menu.children.forEach(function (item, i) {
itemArr.push(this2_.renderItem(h, item, pIndex_, i))
})
if (!menu.alwaysShow) {
menu.children.forEach(function (item, i) {
itemArr.push(this2_.renderItem(h, item, pIndex_, i))
})
}
return h(
SubMenu,
{ key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index },
......@@ -97,7 +99,7 @@ export default {
},
renderItem: function (h, menu, pIndex, index) {
if (!menu.hidden) {
return menu.children ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
return menu.children && !menu.alwaysShow ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
}
},
renderMenu: function (h, menuTree) {
......
src/permission.js
......@@ -16,7 +16,7 @@ router.beforeEach((to, from, next) => {
if (getToken()) {
/* has token */
if (to.path === '/login') {
next({ path: '/' })
next({ path: '/dashboard/workplace' })
NProgress.done()
} else {
if (store.getters.roles.length === 0) {
......@@ -37,7 +37,6 @@ router.beforeEach((to, from, next) => {
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
next()
} else {
......
src/router/index.js
......@@ -256,8 +256,34 @@ export const asyncRouterMap = [
path: 'settings',
name: 'settings',
component: () => import('@/views/account/Index'),
meta: { title: '个人设置' }
}
meta: { title: '个人设置', hideHeader: true },
redirect: '/account/settings/base',
alwaysShow: true,
children: [
{
path: 'base',
name: 'BaseSettings',
component: () => import('@/views/account/BaseSetting'),
hidden: true,
meta: { title: '基本设置' }
},
{
path: 'security',
name: 'SecuritySettings',
component: () => import('@/views/account/Security'),
hidden: true,
meta: { title: '安全设置' }
},
{
path: 'custom',
name: 'CustomSettings',
component: () => import('@/views/account/Custom'),
hidden: true,
meta: { title: '个性化设置' }
},
]
},
]
},
......
src/utils/request.js
......@@ -2,6 +2,7 @@ import axios from 'axios'
import store from '../store'
import { VueAxios } from './axios'
import notification from 'ant-design-vue/es/notification'
import { getToken } from "@/utils/auth"
// 创建 axios 实例
......@@ -27,8 +28,9 @@ const err = (error) => {
// request 拦截器
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers[ 'Access-Token' ] = store.getters.token // 让每个请求携带自定义 token 请根据实际情况自行修改
const token = getToken()
if (token) {
config.headers[ 'Access-Token' ] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
}
return config
}, err)
......
src/views/account/BaseSetting.vue 0 → 100644
<template>
<div class="account-settings-info-view">
<a-row :gutter="16">
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
<img :src="option.img"/>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
import VueCropper from "vue-cropper/example/src/vue-cropper/vue-cropper"
export default {
components: {
VueCropper
},
data () {
return {
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
}
}
}
}
</script>
<style lang="scss" scoped>
.avatar-upload-wrapper {
height: 200px;
width: 100%;
}
.ant-upload-preview {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
.upload-icon {
position: absolute;
top: 0;
right: 10px;
font-size: 1.4rem;
padding: 0.5rem;
background: rgba(222, 221, 221, 0.7);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.mask {
opacity: 0;
position: absolute;
background: rgba(0,0,0,0.4);
cursor: pointer;
transition: opacity 0.4s;
&:hover {
opacity: 1;
}
i {
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1rem;
margin-top: -1rem;
color: #d6d6d6;
}
}
img, .mask {
width: 100%;
max-width: 180px;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
}
</style>
\ No newline at end of file
src/views/account/Custom.vue 0 → 100644
<template>
<div>
主题色：{{ theme | themeFilter }} <a-switch defaultChecked @change='onChange'/>
</div>
</template>
<script>
export default {
name: "Security",
data () {
return {
theme: 'dark'
}
},
filters: {
themeFilter(theme) {
const themeMap = {
'dark': '暗色',
'light': '白色'
}
return themeMap[theme]
}
},
methods: {
onChange (checked) {
if (checked) {
this.theme = 'dark'
} else {
this.theme = 'light'
}
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/account/Index.vue
<template>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div>You are not alone.</div>
<a-card :bordered="false" :bodyStyle="{ padding: '16px 0' }">
<div class="account-settings-info-main">
<div class="account-settings-info-left">
<a-menu
mode="inline"
:defaultSelectedKeys="['1']"
type="inner"
@openChange="onOpenChange"
>
<a-menu-item key="1">
<router-link :to="{ name: 'BaseSettings' }">
<a-icon type="mail" />
基本设置
</router-link>
</a-menu-item>
<a-menu-item key="2">
<router-link :to="{ name: 'SecuritySettings' }">
<a-icon type="mail" />
安全设置
</router-link>
</a-menu-item>
<a-menu-item key="3">
<router-link :to="{ name: 'CustomSettings' }">
<a-icon type="mail" />
个性化
</router-link>
</a-menu-item>
<a-menu-item key="4">
<a-icon type="mail" />
账户绑定
</a-menu-item>
<a-menu-item key="5">
<a-icon type="mail" />
新消息通知
</a-menu-item>
</a-menu>
</div>
<div class="account-settings-info-right">
<div class="account-settings-info-title">
<span>{{ $route.meta.title }}</span>
</div>
<route-view></route-view>
</div>
</div>
<div slot="extra">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="可用节点" content="16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="高级节点" content="7/16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="剩余流量" content="2,23Gb"/>
</a-col>
</a-row>
</div>
<a-card :style="{ padding: '0 15%' }">
<a-row :gutter="16">
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
<img :src="option.img"/>
</div>
</a-col>
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
</a-row>
</a-card>
</page-layout>
</a-card>
</template>
<script>
import {timeFix, welcome} from "../../utils/util"
import LayoutMain from '@/components/layout/LayoutMain'
import PageLayout from '@/components/layout/PageLayout'
import HeadInfo from '@/components/tools/HeadInfo'
import ASelect from "ant-design-vue/es/select";
import AForm from "ant-design-vue/es/form/Form";
import VueCropper from "vue-cropper/example/src/vue-cropper/vue-cropper";
import RouteView from "@/components/layout/RouteView";
export default {
name: "Index",
components: {
VueCropper,
AForm,
ASelect,
LayoutMain,
PageLayout,
HeadInfo
RouteView,
PageLayout
},
data () {
return {
timeFix: timeFix(),
welcome: welcome(),
avatar: '',
user: {},
// cropper
preview: {},
option: {
......@@ -128,79 +73,48 @@
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
}
}
},
computed: {
userInfo() {
return this.$store.getters.userInfo
},
pageTitle: ''
}
},
created() {
this.user = this.userInfo
this.avatar = this.userInfo.avatar
created () {
},
methods: {
onOpenChange (openKeys) {
realTime (data) {
this.preview = data
}
}
},
},
}
</script>
<style lang="scss" scoped>
.avatar-upload-wrapper {
height: 200px;
.account-settings-info-main {
width: 100%;
}
display: flex;
height: 100%;
overflow: auto;
.ant-upload-preview {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
.upload-icon {
position: absolute;
top: 0;
right: 10px;
font-size: 1.4rem;
padding: 0.5rem;
background: rgba(222, 221, 221, 0.7);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
.account-settings-info-left {
border-right: 1px solid #e8e8e8;
width: 224px;
}
.mask {
opacity: 0;
position: absolute;
background: rgba(0,0,0,0.4);
cursor: pointer;
transition: opacity 0.4s;
&:hover {
opacity: 1;
}
.account-settings-info-right {
flex: 1 1;
padding: 8px 40px;
i {
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1rem;
margin-top: -1rem;
color: #d6d6d6;
.account-settings-info-title {
color: rgba(0,0,0,.85);
font-size: 20px;
font-weight: 500;
line-height: 28px;
margin-bottom: 12px;
}
.account-settings-info-view {
padding-top: 12px;
}
}
img, .mask {
width: 100%;
max-width: 180px;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
}
</style>
\ No newline at end of file
src/views/account/IndexOld.vue 0 → 100644
<template>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div>You are not alone.</div>
</div>
<div slot="extra">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="可用节点" content="16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="高级节点" content="7/16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="剩余流量" content="2,23Gb"/>
</a-col>
</a-row>
</div>
<a-card :style="{ padding: '0 15%' }">
<a-row :gutter="16">
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
<img :src="option.img"/>
</div>
</a-col>
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
</a-row>
</a-card>
</page-layout>
</template>
<script>
import {timeFix, welcome} from "../../utils/util"
import LayoutMain from '@/components/layout/LayoutMain'
import PageLayout from '@/components/layout/PageLayout'
import HeadInfo from '@/components/tools/HeadInfo'
import ASelect from "ant-design-vue/es/select";
import AForm from "ant-design-vue/es/form/Form";
import VueCropper from "vue-cropper/example/src/vue-cropper/vue-cropper";
export default {
name: "Index",
components: {
VueCropper,
AForm,
ASelect,
LayoutMain,
PageLayout,
HeadInfo
},
data () {
return {
timeFix: timeFix(),
welcome: welcome(),
avatar: '',
user: {},
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
}
}
},
computed: {
userInfo() {
return this.$store.getters.userInfo
}
},
created() {
this.user = this.userInfo
this.avatar = this.userInfo.avatar
},
methods: {
realTime (data) {
this.preview = data
}
}
}
</script>
<style lang="scss" scoped>
.avatar-upload-wrapper {
height: 200px;
width: 100%;
}
.ant-upload-preview {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
.upload-icon {
position: absolute;
top: 0;
right: 10px;
font-size: 1.4rem;
padding: 0.5rem;
background: rgba(222, 221, 221, 0.7);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.mask {
opacity: 0;
position: absolute;
background: rgba(0,0,0,0.4);
cursor: pointer;
transition: opacity 0.4s;
&:hover {
opacity: 1;
}
i {
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1rem;
margin-top: -1rem;
color: #d6d6d6;
}
}
img, .mask {
width: 100%;
max-width: 180px;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
}
</style>
\ No newline at end of file
src/views/account/Security.vue 0 → 100644
<template>
<div>
222
</div>
</template>
<script>
export default {
name: "Security"
}
</script>
<style scoped>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment