Skip to content

W
wangxiaolu-sfa-ui
提交 6c5b0c54 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

refactor(store/user.js, settings/index.vue, profile/index.vue): 导航菜单修改，侧边栏宽度修改，账号密码保存 token 多加一层取值

同标题
上级 556afe94
隐藏空白字符变更
内嵌 并排
正在显示 包含 221 行增加 和 189 行删除
src/assets/styles/variables.module.scss
浏览文件 @ 6c5b0c54
......@@ -21,7 +21,7 @@ $menuLightText: #303133;
$menuLightActiveText: #409EFF;
// 基础变量
$base-sidebar-width: 200px;
$base-sidebar-width: 230px;
$sideBarWidth: 200px;
// 菜单暗色变量
......
src/layout/components/Navbar.vue
浏览文件 @ 6c5b0c54
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
<hamburger id="hamburger-container"
:is-active="appStore.sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container"
class="breadcrumb-container"
v-if="!settingsStore.topNav" />
<top-nav id="topmenu-container"
class="topmenu-container"
v-if="settingsStore.topNav" />
<div class="right-menu">
<template v-if="appStore.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="主题模式" effect="dark" placement="bottom">
<div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
<header-search id="header-search"
class="right-menu-item" />
<screenfull id="screenfull"
class="right-menu-item hover-effect" />
<el-tooltip content="主题模式"
effect="dark"
placement="bottom">
<div class="right-menu-item hover-effect theme-switch-wrapper"
@click="toggleTheme">
<svg-icon v-if="settingsStore.isDark"
icon-class="sunny" />
<svg-icon v-if="!settingsStore.isDark"
icon-class="moon" />
</div>
</el-tooltip>
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小"
effect="dark"
placement="bottom">
<size-select id="size-select"
class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<el-dropdown @command="handleCommand"
class="right-menu-item hover-effect"
trigger="click">
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<!-- <img :src="userStore.avatar" class="user-avatar" /> -->
<span class="user-name">{{ name }}</span>
<el-icon><caret-bottom /></el-icon>
</div>
<template #dropdown>
......@@ -40,10 +52,12 @@
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
<el-dropdown-item command="setLayout"
v-if="settingsStore.showSettings">
<span>布局设置</span>
</el-dropdown-item>
<el-dropdown-item divided command="logout">
<el-dropdown-item divided
command="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
......@@ -72,6 +86,8 @@ const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const name = userStore.name;
function toggleSideBar() {
appStore.toggleSideBar()
}
......@@ -111,105 +127,114 @@ function toggleTheme() {
}
</script>
<style lang='scss' scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.breadcrumb-container {
float: left;
}
.topmenu-container {
position: absolute;
left: 50px;
}
<style lang='scss'
scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
.errLog-container {
display: inline-block;
vertical-align: top;
}
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
display: flex;
.breadcrumb-container {
float: left;
}
&:focus {
outline: none;
.topmenu-container {
position: absolute;
left: 50px;
}
.right-menu-item {
.errLog-container {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: var(--navbar-text);
vertical-align: text-bottom;
vertical-align: top;
}
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
.right-menu {
float: right;
height: 100%;
line-height: 50px;
display: flex;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
&:focus {
outline: none;
}
&.theme-switch-wrapper {
display: flex;
align-items: center;
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: var(--navbar-text);
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
svg {
transition: transform 0.3s;
&:hover {
transform: scale(1.15);
background: rgba(0, 0, 0, 0.025);
}
}
}
}
.avatar-container {
margin-right: 40px;
&.theme-switch-wrapper {
display: flex;
align-items: center;
.avatar-wrapper {
margin-top: 5px;
position: relative;
svg {
transition: transform 0.3s;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
&:hover {
transform: scale(1.15);
}
}
}
}
i {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
.avatar-container {
margin-right: 40px;
.el-dropdown {
display: flex;
align-items: center;
.user-name{
font-size: 16px;
}
.avatar-wrapper {
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
i {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
}
}
}
</style>
src/layout/components/Settings/index.vue
浏览文件 @ 6c5b0c54
......@@ -49,12 +49,12 @@
</span>
</div>
<div class="drawer-item">
<!-- <div class="drawer-item">
<span>固定 Header</span>
<span class="comp-style">
<el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
</span>
</div>
</div> -->
<div class="drawer-item">
<span>显示 Logo</span>
......
src/store/modules/user.js
浏览文件 @ 6c5b0c54
......@@ -25,8 +25,8 @@ export default defineStore(
return new Promise((resolve, reject) => {
if (type === 'upass') {
login({ username, password }).then(res => {
setToken(res.token)
this.token = res.token
setToken(res.data.access_token)
this.token = res.data.access_token
resolve()
}).catch(error => {
reject(error)
......@@ -58,7 +58,7 @@ export default defineStore(
this.roles = ['ROLE_DEFAULT']
}
this.id = user.userId
this.name = user.userName
this.name = user.nickName
this.avatar = avatar
resolve(res)
}).catch(error => {
......
src/utils/index.js
浏览文件 @ 6c5b0c54
import { parseTime } from './ruoyi'
export * from './jsencrypt.js'
export * from './ruoyi'
/**
* 表格时间格式化
......
src/views/system/user/profile/index.vue
浏览文件 @ 6c5b0c54
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card class="box-card">
<template v-slot:header>
<div class="clearfix">
<span>个人信息</span>
</div>
</template>
<div>
<div class="text-center">
<userAvatar />
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<svg-icon icon-class="user" />用户名称
<div class="pull-right">{{ state.user.userName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="phone" />手机号码
<div class="pull-right">{{ state.user.phonenumber }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="email" />用户邮箱
<div class="pull-right">{{ state.user.email }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="tree" />所属部门
<div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色
<div class="pull-right">{{ state.roleGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="date" />创建日期
<div class="pull-right">{{ state.user.createTime }}</div>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="18" :xs="24">
<el-card>
<template v-slot:header>
<div class="clearfix">
<span>基本资料</span>
</div>
</template>
<el-tabs v-model="activeTab">
<el-tab-pane label="基本资料" name="userinfo">
<userInfo :user="state.user" />
</el-tab-pane>
<el-tab-pane label="修改密码" name="resetPwd">
<resetPwd />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6"
:xs="24">
<el-card class="box-card">
<template v-slot:header>
<div class="clearfix">
<span>个人信息</span>
</div>
</template>
<div>
<!-- <div class="text-center">
<userAvatar />
</div> -->
<ul class="list-group list-group-striped">
<li class="list-group-item">
<svg-icon icon-class="user" />用户名称
<div class="pull-right">{{ state.user.nickName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="phone" />手机号码
<div class="pull-right">{{ state.user.phonenumber }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="email" />用户邮箱
<div class="pull-right">{{ state.user.email }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="tree" />所属部门
<div class="pull-right"
v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色
<div class="pull-right">{{ state.roleGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="date" />创建日期
<div class="pull-right">{{ state.user.createTime }}</div>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="18"
:xs="24">
<el-card>
<template v-slot:header>
<div class="clearfix">
<span>基本资料</span>
</div>
</template>
<el-tabs v-model="activeTab">
<el-tab-pane label="基本资料"
name="userinfo">
<userInfo :user="state.user" />
</el-tab-pane>
<el-tab-pane label="修改密码"
name="resetPwd">
<resetPwd />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
<script setup
name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
const activeTab = ref("userinfo");
const state = reactive({
user: {},
roleGroup: {},
postGroup: {}
});
function getUser() {
getUserProfile().then(response => {
state.user = response.data;
state.roleGroup = response.roleGroup;
state.postGroup = response.postGroup;
const activeTab = ref("userinfo");
const state = reactive({
user: {},
roleGroup: {},
postGroup: {}
});
};
getUser();
function getUser() {
getUserProfile().then(response => {
state.user = response.data;
state.roleGroup = response.roleGroup;
state.postGroup = response.postGroup;
});
};
getUser();
</script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论