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