wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

使用Pinia代替Vuex进行数据存储

Browse Source
This commit is contained in:
不做码农 2022-06-10 22:25:19 +08:00
parent ef604d008d
commit 859f8acfe2
41 changed files with 700 additions and 797 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -30,6 +30,7 @@
"jsencrypt": "3.2.1",
"md-editor-v3": "^1.11.11",
"nprogress": "0.2.0",
"pinia": "^2.0.14",
"sortablejs": "^1.15.0",
"vue": "^3.2.36",
"vue-clipboard3": "^2.0.0",
@ -37,7 +38,6 @@
"vue-i18n": "^9.1.10",
"vue-router": "^4.0.15",
"vue3-seamless-scroll": "^1.2.0",
"vuex": "4.0.2",
"wangeditor": "^4.7.15"
},
"devDependencies": {

9
src/App.vue
View File

@ -4,7 +4,8 @@
</el-config-provider>
</template>
<script setup>
import store from '@/store/index'
import useUserStore from './store/modules/user'
import useAppStore from './store/modules/app'
import { ElConfigProvider } from 'element-plus'
import zh from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
import en from 'element-plus/lib/locale/lang/en' // 英文语言
@ -13,15 +14,15 @@ import tw from 'element-plus/lib/locale/lang/zh-tw' //繁体
const { proxy } = getCurrentInstance()
const token = computed(() => {
return store.getters.token
return useUserStore().token
})
const lang = computed(() => {
return store.getters.language
return useAppStore().lang
})
const locale = ref(zh)
const size = ref('small')
size.value = store.getters.size
size.value = useAppStore().size
watch(
token,
(val) => {

13
src/auto-import.d.ts vendored
View File

@ -1,19 +1,28 @@
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const createPinia: typeof import('pinia')['createPinia']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const defineStore: typeof import('pinia')['defineStore']
const effectScope: typeof import('vue')['effectScope']
const EffectScope: typeof import('vue')['EffectScope']
const getActivePinia: typeof import('pinia')['getActivePinia']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const mapActions: typeof import('pinia')['mapActions']
const mapGetters: typeof import('pinia')['mapGetters']
const mapState: typeof import('pinia')['mapState']
const mapStores: typeof import('pinia')['mapStores']
const mapWritableState: typeof import('pinia')['mapWritableState']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
@ -33,9 +42,12 @@ declare global {
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const setActivePinia: typeof import('pinia')['setActivePinia']
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const storeToRefs: typeof import('pinia')['storeToRefs']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
@ -46,7 +58,6 @@ declare global {
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const useStore: typeof import('vuex')['useStore']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
}

4
src/components/HeaderSearch/index.vue
View File

@ -21,6 +21,7 @@
import Fuse from 'fuse.js'
import { getNormalPath } from '@/utils/ruoyi'
import { isHttp } from '@/utils/validate'
import usePermissionStore from '@/store/modules/permission'
const search = ref('');
const options = ref([]);
@ -28,9 +29,8 @@ const searchPool = ref([]);
const show = ref(false);
const fuse = ref(undefined);
const headerSearchSelectRef = ref(null);
const store = useStore();
const router = useRouter();
const routes = computed(() => store.getters.permission_routes);
const routes = computed(() => usePermissionStore().routes);
function click() {
show.value = !show.value

7
src/components/LangSelect/index.vue
View File

@ -14,8 +14,9 @@
</template>
<script setup>
const store = useStore()
const lang = computed(() => store.getters.language)
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const lang = computed(() => useAppStore().lang)
const { proxy } = getCurrentInstance()
const langOptions = ref([
@ -26,7 +27,7 @@ const langOptions = ref([
function handleLanguageChange(lang) {
proxy.$modal.loading('正在设置语言，请稍候...')
store.dispatch('app/setLang', lang)
appStore.setLang(lang)
setTimeout('window.location.reload()', 1000)
}
</script>

7
src/components/Notice/Index.vue
View File

@ -33,15 +33,18 @@
</template>
<script setup name="noticeIndex">
import useSocketStore from '@/store/modules/socket'
const { proxy } = getCurrentInstance()
// 小红点
const newsDot = ref(false)
const noticeList = computed(() => {
return proxy.$store.getters.noticeList
return useSocketStore().noticeList
})
const noticeDot = computed(() => {
return proxy.$store.getters.noticeDot
return useSocketStore().noticeDot
})
// 全部已读点击
function onAllReadClick() {

27
src/components/SizeSelect/index.vue
View File

@ -14,8 +14,9 @@
</template>
<script setup>
const store = useStore()
const size = computed(() => store.getters.size)
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const size = computed(() => appStore.size)
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
@ -25,21 +26,21 @@ const sizeOptions = ref([
{ label: proxy.$t('layout.small'), value: 'small' },
])
function refreshView() {
// In order to make the cached page re-rendered
store.dispatch('tagsView/delAllCachedViews', route)
// function refreshView() {
// // In order to make the cached page re-rendered
// store.dispatch('tagsView/delAllCachedViews', route)
const { fullPath } = route
// const { fullPath } = route
nextTick(() => {
router.replace({
path: '/redirect' + fullPath,
})
})
}
// nextTick(() => {
// router.replace({
// path: '/redirect' + fullPath,
// })
// })
// }
function handleSetSize(size) {
proxy.$modal.loading('正在设置布局大小，请稍候...')
store.dispatch('app/setSize', size)
appStore.setSize(size)
setTimeout('window.location.reload()', 1000)
}
</script>

13
src/components/TopNav/index.vue
View File

@ -37,6 +37,9 @@ import { constantRoutes } from '@/router'
import { isHttp } from '@/utils/validate'
import { useRouter } from 'vue-router'
import { getNormalPath } from '@/utils/ruoyi'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
// 顶部栏初始数
const visibleNumber = ref(5)
@ -45,14 +48,16 @@ const isFrist = ref(false)
// 当前激活菜单的 index
const currentIndex = ref(undefined)
const store = useStore()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const route = useRoute()
const router = useRouter()
// 主题颜色
const theme = computed(() => store.state.settings.theme)
const theme = computed(() => settingsStore.theme)
// 所有的路由信息
const routers = computed(() => store.state.permission.topbarRouters)
const routers = computed(() => permissionStore.topbarRouters)
// 顶部显示菜单
const topMenus = computed(() => {
@ -153,7 +158,7 @@ function activeRoutes(key) {
})
}
if (routes.length > 0) {
store.commit('SET_SIDEBAR_ROUTERS', routes)
permissionStore.setSidebarRouters(routes)
}
return routes
}

44
src/directive/permission/hasPermi.js
View File

@ -1,28 +1,28 @@
/**
* v-hasPermi 操作权限处理
* Copyright (c) 2019 ruoyi
*/
* v-hasPermi 操作权限处理
* Copyright (c) 2019 ruoyi
*/
import store from '@/store'
import useUserStore from '@/store/modules/user'
export default {
mounted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions
export default {
mounted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*";
const permissions = useUserStore().permissions
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag.includes(permission)
})
const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag.includes(permission)
})
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`请设置操作权限标签值`)
}
}
}
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`请设置操作权限标签值`)
}
}
}

4
src/directive/permission/hasRole.js
View File

@ -3,13 +3,13 @@
* Copyright (c) 2019 ruoyi
*/
import store from '@/store'
import useUserStore from '@/store/modules/user'
export default {
mounted(el, binding, vnode) {
const { value } = binding
const super_admin = "admin";
const roles = store.getters && store.getters.roles
const roles = useUserStore().roles
if (value && value instanceof Array && value.length > 0) {
const roleFlag = value

9
src/i18n/index.js
View File

@ -1,9 +1,10 @@
import { createI18n } from 'vue-i18n'
import store from '@/store/index'
// import useAppStore from '@/store/modules/app'
import { listLangByLocale } from '@/api/system/commonLang'
import jsCookie from 'js-cookie'
const language = computed(() => {
return store.getters.language
// return useAppStore().lang
return jsCookie.get('lang') || 'zh-cn'
})
import zhCn from './lang/zh-cn.json'
@ -23,7 +24,7 @@ const i18n = createI18n({
// 全局注入 $t 函数
globalInjection: true,
fallbackLocale: 'zh-cn',
locale: store.getters.language, //默认选择的语言
locale: language.value, //默认选择的语言
legacy: false, // 使用 Composition API 模式，则需要将其设置为false
messages: {
'zh-cn': {

8
src/layout/components/AppMain.vue
View File

@ -10,9 +10,11 @@
</el-main>
</template>
<script setup>
const route = useRoute()
const store = useStore()
import useTagsViewStore from '@/store/modules/tagsView'
// const route = useRoute()
const tagsViewStore = useTagsViewStore()
// tagsViewStore.addCachedView(route)
const cachedViews = computed(() => {
return store.state.tagsView.cachedViews
return tagsViewStore.cachedViews
})
</script>

31
src/layout/components/Navbar.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="navbar" :data-theme="sideTheme" :class="getters.device">
<hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<template v-if="getters.device != 'mobile'">
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
<div class="navbar" :data-theme="sideTheme" :class="appStore.device">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<template v-if="appStore.device != 'mobile'">
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
</template>
<div class="right-menu">
<header-search id="header-search" class="right-menu-item" v-if="getters.device != 'mobile'" />
<header-search id="header-search" class="right-menu-item" v-if="appStore.device != 'mobile'" />
<zr-git title="源码地址" class="right-menu-item" />
<zr-doc title="文档地址" class="right-menu-item" />
<screenfull title="全屏" class="right-menu-item" />
@ -17,8 +17,8 @@
<el-dropdown @command="handleCommand" class="right-menu-item avatar-container" trigger="hover">
<span class="avatar-wrapper">
<img :src="getters.avatar" class="user-avatar" />
<span class="name">{{ getters.name }}</span>
<img :src="userStore.avatar" class="user-avatar" />
<span class="name">{{ userStore.name }}</span>
<el-icon><ArrowDown /></el-icon>
</span>
<template #dropdown>
@ -50,13 +50,18 @@ import ZrGit from '@/components/Zr/Git'
import ZrDoc from '@/components/Zr/Doc'
import Notice from '@/components/Notice/Index'
import LangSelect from '@/components/LangSelect/index'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
const { proxy } = getCurrentInstance()
const store = useStore()
const getters = computed(() => store.getters)
const sideTheme = computed(() => store.state.settings.sideTheme)
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const sideTheme = computed(() => settingsStore.sideTheme)
function toggleSideBar() {
store.dispatch('app/toggleSideBar')
appStore.toggleSideBar()
}
function handleCommand(command) {
@ -80,7 +85,7 @@ function logout() {
type: 'warning',
})
.then(() => {
store.dispatch('LogOut').then(() => {
userStore.logOut().then(() => {
location.href = '/index'
})
})

57
src/layout/components/Settings/index.vue
View File

@ -93,13 +93,18 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
import { useDark, useCycleList, useColorMode } from '@vueuse/core'
import { useDynamicTitle } from '@/utils/dynamicTitle'
import { getLightColor } from '@/utils/index'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const { proxy } = getCurrentInstance()
const store = useStore()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const showSettings = ref(false)
const theme = ref(store.state.settings.theme)
const sideTheme = ref(store.state.settings.sideTheme)
const storeSettings = computed(() => store.state.settings)
const theme = ref(settingsStore.theme)
const sideTheme = ref(settingsStore.sideTheme)
const storeSettings = computed(() => settingsStore)
const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
// 可以手动更改当前值 model.value = 'cafe'
@ -117,13 +122,10 @@ const isDark = useDark()
const topNav = computed({
get: () => storeSettings.value.topNav,
set: (val) => {
store.dispatch('settings/changeSetting', {
key: 'topNav',
value: val,
})
settingsStore.changeSetting({ key: 'topNav', value: val })
if (!val) {
store.dispatch('app/toggleSideBarHide', false)
store.commit('SET_SIDEBAR_ROUTERS', store.state.permission.defaultRoutes)
appStore.toggleSideBarHide(false)
permissionStore.setSidebarRouters(permissionStore.defaultRoutes)
}
},
})
@ -131,50 +133,35 @@ const topNav = computed({
const tagsView = computed({
get: () => storeSettings.value.tagsView,
set: (val) => {
store.dispatch('settings/changeSetting', {
key: 'tagsView',
value: val,
})
settingsStore.changeSetting({ key: 'tagsView', value: val })
},
})
/**是否需要固定头部 */
const fixedHeader = computed({
get: () => storeSettings.value.fixedHeader,
set: (val) => {
store.dispatch('settings/changeSetting', {
key: 'fixedHeader',
value: val,
})
settingsStore.changeSetting({ key: 'fixedHeader', value: val })
},
})
// 是否显示底部
const showFooter = computed({
get: () => storeSettings.value.showFooter,
set: (val) => {
store.dispatch('settings/changeSetting', {
key: 'showFooter',
value: val,
})
settingsStore.changeSetting({ key: 'showFooter', value: val })
},
})
/**是否需要侧边栏的logo */
const sidebarLogo = computed({
get: () => storeSettings.value.sidebarLogo,
set: (val) => {
store.dispatch('settings/changeSetting', {
key: 'sidebarLogo',
value: val,
})
settingsStore.changeSetting({ key: 'sidebarLogo', value: val })
},
})
/**是否需要侧边栏的动态网页的title */
const dynamicTitle = computed({
get: () => storeSettings.value.dynamicTitle,
set: (val) => {
store.dispatch('settings/changeSetting', {
key: 'dynamicTitle',
value: val,
})
settingsStore.changeSetting({ key: 'dynamicTitle', value: val })
// 动态设置网页标题
useDynamicTitle()
},
@ -216,10 +203,7 @@ watch(
* 改变主题颜色
*/
function themeChange(val) {
store.dispatch('settings/changeSetting', {
key: 'theme',
value: val,
})
settingsStore.changeSetting({ key: 'theme', value: val })
theme.value = val
// 设置element-plus ui主题
document.documentElement.style.setProperty('--el-color-primary', val)
@ -230,10 +214,7 @@ function themeChange(val) {
}
}
function handleTheme(val) {
store.dispatch('settings/changeSetting', {
key: 'sideTheme',
value: val,
})
settingsStore.changeSetting({ key: 'sideTheme', value: val })
sideTheme.value = val
const body = document.documentElement
if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')

5
src/layout/components/Sidebar/Logo.vue
View File

@ -15,6 +15,7 @@
<script setup>
import logo from '@/assets/logo/logo.png'
import useSettingsStore from '@/store/modules/settings'
defineProps({
collapse: {
@ -24,8 +25,8 @@ defineProps({
})
const title = ref(import.meta.env.VITE_APP_TITLE)
const store = useStore()
const sideTheme = computed(() => store.state.settings.sideTheme)
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
</script>
<style lang="scss" scoped>

17
src/layout/components/Sidebar/index.vue
View File

@ -20,15 +20,20 @@
<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const route = useRoute()
const store = useStore()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const sidebarRouters = computed(() => store.getters.sidebarRouters)
const showLogo = computed(() => store.state.settings.sidebarLogo)
const sideTheme = computed(() => store.state.settings.sideTheme)
const theme = computed(() => store.state.settings.theme)
const isCollapse = computed(() => !store.state.app.sidebar.opened)
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)
const activeMenu = computed(() => {
const { meta, path } = route

33
src/layout/components/TagsView/ScrollPane.vue
View File

@ -1,19 +1,16 @@
<template>
<el-scrollbar
ref="scrollContainer"
:vertical="false"
class="scroll-container"
@wheel.prevent="handleScroll"
>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
<slot />
</el-scrollbar>
</template>
<script setup>
const tagAndTagSpacing = ref(4);
const { proxy } = getCurrentInstance();
import useTagsViewStore from '@/store/modules/tagsView'
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrap$);
const tagAndTagSpacing = ref(4)
const { proxy } = getCurrentInstance()
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrap$)
onMounted(() => {
scrollWrapper.value.addEventListener('scroll', emitScroll, true)
@ -24,7 +21,7 @@ onBeforeUnmount(() => {
function handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = scrollWrapper.value;
const $scrollWrapper = scrollWrapper.value
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
}
const emits = defineEmits()
@ -32,13 +29,13 @@ const emitScroll = () => {
emits('scroll')
}
const store = useStore();
const visitedViews = computed(() => store.state.tagsView.visitedViews);
const tagsViewStore = useTagsViewStore()
const visitedViews = computed(() => tagsViewStore.visitedViews)
function moveToTarget(currentTag) {
const $container = proxy.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = scrollWrapper.value;
const $scrollWrapper = scrollWrapper.value
let firstTag = null
let lastTag = null
@ -54,17 +51,17 @@ function moveToTarget(currentTag) {
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else {
const tagListDom = document.getElementsByClassName('tags-view-item');
const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
const tagListDom = document.getElementsByClassName('tags-view-item')
const currentIndex = visitedViews.value.findIndex((item) => item === currentTag)
let prevTag = null
let nextTag = null
for (const k in tagListDom) {
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
prevTag = tagListDom[k];
prevTag = tagListDom[k]
}
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
nextTag = tagListDom[k];
nextTag = tagListDom[k]
}
}
}
@ -87,7 +84,7 @@ defineExpose({
})
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.scroll-container {
white-space: nowrap;
position: relative;

16
src/layout/components/TagsView/index.vue
View File

@ -37,6 +37,9 @@
<script setup>
import ScrollPane from './ScrollPane'
import { getNormalPath } from '@/utils/ruoyi'
import useTagsViewStore from '@/store/modules/tagsView'
// import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const visible = ref(false)
const top = ref(0)
@ -46,13 +49,12 @@ const affixTags = ref([])
const scrollPaneRef = ref(null)
const { proxy } = getCurrentInstance()
const store = useStore()
const route = useRoute()
const router = useRouter()
const visitedViews = computed(() => store.state.tagsView.visitedViews)
const routes = computed(() => store.state.permission.routes)
// const theme = computed(() => store.state.settings.theme)
const visitedViews = computed(() => useTagsViewStore().visitedViews)
const routes = computed(() => usePermissionStore().routes)
// const theme = computed(() => useSettingsStore().theme);
watch(route, () => {
addTags()
@ -124,14 +126,14 @@ function initTags() {
for (const tag of res) {
// Must have tag name
if (tag.name) {
store.dispatch('tagsView/addVisitedView', tag)
useTagsViewStore().addVisitedView(tag)
}
}
}
function addTags() {
const { name } = route
if (name) {
store.dispatch('tagsView/addView', route)
useTagsViewStore().addView(route)
}
return false
}
@ -142,7 +144,7 @@ function moveToCurrentTag() {
scrollPaneRef.value.moveToTarget(r)
// when query is different then update
if (r.fullPath !== route.fullPath) {
store.dispatch('tagsView/updateVisitedView', route)
useTagsViewStore().updateVisitedView(route)
}
}
}

36
src/layout/index.vue
View File

@ -33,25 +33,29 @@ import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import useTagsViewStore from '@/store/modules/tagsView'
const menuDrawer = computed({
get: () => store.state.app.sidebar.opened,
get: () => useAppStore().sidebar.opened,
set: (val) => {
store.dispatch('app/toggleSideBar')
useAppStore().toggleSideBar(val)
},
})
let store = useStore()
const theme = computed(() => store.state.settings.theme)
const sidebar = computed(() => store.state.app.sidebar)
const device = computed(() => store.state.app.device)
const needTagsView = computed(() => store.state.settings.tagsView)
const fixedHeader = computed(() => store.state.settings.fixedHeader)
const showFooter = computed(() => store.state.settings.showFooter)
const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme)
const sidebar = computed(() => useAppStore().sidebar)
const device = computed(() => useAppStore().device)
const needTagsView = computed(() => settingsStore.tagsView)
const fixedHeader = computed(() => settingsStore.fixedHeader)
const showFooter = computed(() => settingsStore.showFooter)
// appMain 模块 start
const route = useRoute()
store.dispatch('tagsView/addCachedView', route)
useTagsViewStore().addCachedView(route)
const cachedViews = computed(() => {
return store.state.tagsView.cachedViews
return useTagsViewStore().cachedViews
})
//appMain 模块结束
@ -66,18 +70,18 @@ const WIDTH = 992 // refer to Bootstrap's responsive design
watchEffect(() => {
if (device.value === 'mobile' && sidebar.value.opened) {
// store.dispatch('app/closeSideBar')
// useAppStore().closeSideBar()
}
if (width.value - 1 < WIDTH) {
store.dispatch('app/toggleDevice', 'mobile')
// store.dispatch('app/closeSideBar')
useAppStore().toggleDevice('mobile')
// useAppStore().closeSideBar()
} else {
store.dispatch('app/toggleDevice', 'desktop')
useAppStore().toggleDevice('desktop')
}
})
function handleClickOutside() {
store.dispatch('app/closeSideBar')
useAppStore().closeSideBar()
}
const settingRef = ref(null)

2
src/main.js
View File

@ -6,7 +6,6 @@ import 'dayjs/locale/zh-cn'
import '@/assets/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
// 注册指令
@ -65,6 +64,7 @@ app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('svg-icon', SvgIcon)
const store = createPinia()
app.use(router)
app.use(store)
app.use(plugins)

15
src/permission.js
View File

@ -1,11 +1,12 @@
import router from './router'
import store from './store'
import { ElMessage } from 'element-plus'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import { isHttp } from '@/utils/validate'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
NProgress.configure({ showSpinner: false });
const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
@ -13,16 +14,16 @@ const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
to.meta.title && useSettingsStore().setTitle(to.meta.title)
/* has token*/
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (store.getters.roles.length === 0) {
if (useUserStore().roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => {
store.dispatch('GenerateRoutes').then(accessRoutes => {
useUserStore().getInfo().then(() => {
usePermissionStore().generateRoutes().then(accessRoutes => {
// 根据roles权限生成可访问的路由表
accessRoutes.forEach(route => {
if (!isHttp(route.path)) {
@ -32,7 +33,7 @@ router.beforeEach((to, from, next) => {
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})
}).catch(err => {
store.dispatch('LogOut').then(() => {
useUserStore().logOut().then(() => {
ElMessage.error(err != undefined ? err : '登录失败')
next({ path: '/' })
})

6
src/plugins/auth.js
View File

@ -1,8 +1,8 @@
import store from '@/store'
import useUserStore from '@/store/modules/user'
function authPermission(permission) {
const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions
const permissions = useUserStore() && useUserStore().permissions
if (permission && permission.length > 0) {
return permissions.some(v => {
return all_permission === v || v === permission
@ -14,7 +14,7 @@ function authPermission(permission) {
function authRole(role) {
const super_admin = "admin";
const roles = store.getters && store.getters.roles
const roles = useUserStore().roles
if (role && role.length > 0) {
return roles.some(v => {
return super_admin === v || v === role

20
src/plugins/tab.js
View File

@ -1,4 +1,4 @@
import store from '@/store'
import useTagsViewStore from '@/store/modules/tagsView'
import router from '@/router'
export default {
@ -14,7 +14,7 @@ export default {
}
});
}
return store.dispatch('tagsView/delCachedView', obj).then(() => {
return useTagsViewStore().delCachedView(obj).then(() => {
const { path, query } = obj
router.replace({
path: '/redirect' + path,
@ -24,7 +24,7 @@ export default {
},
// 关闭当前tab页签，打开新页签
closeOpenPage(obj) {
store.dispatch("tagsView/delView", router.currentRoute.value);
useTagsViewStore().delView(router.currentRoute.value);
if (obj !== undefined) {
return router.push(obj);
}
@ -32,27 +32,27 @@ export default {
// 关闭指定tab页签
closePage(obj) {
if (obj === undefined) {
return store.dispatch('tagsView/delView', router.currentRoute.value).then(({ lastPath }) => {
return useTagsViewStore().delView(router.currentRoute.value).then(({ lastPath }) => {
return router.push(lastPath || '/index');
});
}
return store.dispatch('tagsView/delView', obj);
return useTagsViewStore().delView(obj);
},
// 关闭所有tab页签
closeAllPage() {
return store.dispatch('tagsView/delAllViews');
return useTagsViewStore().delAllViews();
},
// 关闭左侧tab页签
closeLeftPage(obj) {
return store.dispatch('tagsView/delLeftTags', obj || router.currentRoute.value);
return useTagsViewStore().delLeftTags(obj || router.currentRoute.value);
},
// 关闭右侧tab页签
closeRightPage(obj) {
return store.dispatch('tagsView/delRightTags', obj || router.currentRoute.value);
return useTagsViewStore().delRightTags(obj || router.currentRoute.value);
},
// 关闭其他tab页签
closeOtherPage(obj) {
return store.dispatch('tagsView/delOthersViews', obj || router.currentRoute.value);
return useTagsViewStore().delOthersViews(obj || router.currentRoute.value);
},
// 打开tab页签
openPage(url) {
@ -60,6 +60,6 @@ export default {
},
// 修改tab页签
updatePage(obj) {
return store.dispatch('tagsView/updateVisitedView', obj);
return useTagsViewStore().updateVisitedView(obj);
}
}

25
src/store/getters.js
View File

@ -1,25 +0,0 @@
const getters = {
sidebar: state => state.app.sidebar,
size: state => state.app.size,
device: state => state.app.device,
language: state => state.app.lang,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
userId: state => state.user.userInfo.userId,
introduction: state => state.user.introduction,
roles: state => state.user.roles,
permissions: state => state.user.permissions,
permission_routes: state => state.permission.routes,
userinfo: state => state.user.userInfo,
topbarRouters: state => state.permission.topbarRouters,
defaultRoutes: state => state.permission.defaultRoutes,
sidebarRouters: state => state.permission.sidebarRouters,
onlineUserNum: state => state.socket.onlineNum,
noticeList: state => state.socket.noticeList,
noticeDot: state => state.socket.noticeList.length > 0,
onlineUsers: state => state.socket.onlineUsers
}
export default getters

22
src/store/index.js
View File

@ -1,23 +1,3 @@
import { createStore } from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'
import socket from './modules/socket'
const store = createStore({
modules: {
app,
user,
tagsView,
permission,
settings,
socket
},
getters
});
const store = createPinia()
export default store

183
src/store/modules/app.js
View File

@ -1,75 +1,122 @@
import Cookies from 'js-cookie'
const state = {
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false,
hide: false
},
device: 'desktop',
size: Cookies.get('size') || 'small',
lang: Cookies.get('lang') || 'zh-cn'
}
// const state = {
// sidebar: {
// opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
// withoutAnimation: false,
// hide: false
// },
// device: 'desktop',
// size: Cookies.get('size') || 'small',
// lang: Cookies.get('lang') || 'zh-cn'
// }
const mutations = {
TOGGLE_SIDEBAR: state => {
if (state.sidebar.hide) {
return false;
}
state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = true
// const mutations = {
// TOGGLE_SIDEBAR: state => {
// if (state.sidebar.hide) {
// return false;
// }
// state.sidebar.opened = !state.sidebar.opened
// state.sidebar.withoutAnimation = true
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
// if (state.sidebar.opened) {
// Cookies.set('sidebarStatus', 1)
// } else {
// Cookies.set('sidebarStatus', 0)
// }
// },
// CLOSE_SIDEBAR: (state, withoutAnimation) => {
// Cookies.set('sidebarStatus', 0)
// state.sidebar.opened = false
// state.sidebar.withoutAnimation = withoutAnimation
// },
// TOGGLE_DEVICE: (state, device) => {
// state.device = device
// },
// SET_SIZE: (state, size) => {
// state.size = size
// Cookies.set('size', size)
// },
// SET_SIDEBAR_HIDE: (state, status) => {
// state.sidebar.hide = status
// },
// SET_LANG: (state, lang) => {
// state.lang = lang
// Cookies.set('lang', lang)
// },
// }
// const actions = {
// toggleSideBar({ commit }) {
// commit('TOGGLE_SIDEBAR')
// },
// closeSideBar({ commit }) {
// commit('CLOSE_SIDEBAR', '')
// },
// toggleDevice({ commit }, device) {
// commit('TOGGLE_DEVICE', device)
// },
// setSize({ commit }, size) {
// commit('SET_SIZE', size)
// },
// toggleSideBarHide({ commit }, status) {
// commit('SET_SIDEBAR_HIDE', status)
// },
// setLang({ commit }, lang) {
// commit('SET_LANG', lang)
// },
// }
// export default {
// namespaced: true,
// state,
// mutations,
// actions
// }
const useAppStore = defineStore('app', {
state: () => ({
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false,
hide: false
},
device: 'desktop',
size: Cookies.get('size') || 'small',
lang: Cookies.get('lang') || 'zh-cn'
}),
actions: {
toggleSideBar(withoutAnimation) {
if (this.sidebar.hide) {
return false
}
this.sidebar.opened = !this.sidebar.opened
this.sidebar.withoutAnimation = withoutAnimation
if (this.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
}
},
closeSideBar(withoutAnimation) {
Cookies.set('sidebarStatus', 0)
this.sidebar.opened = false
this.sidebar.withoutAnimation = withoutAnimation
},
toggleDevice(device) {
this.device = device
},
setSize(size) {
this.size = size;
Cookies.set('size', size)
},
toggleSideBarHide(status) {
this.sidebar.hide = status
},
setLang(lang) {
this.lang = lang
Cookies.set('lang', lang)
}
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},
TOGGLE_DEVICE: (state, device) => {
state.device = device
},
SET_SIZE: (state, size) => {
state.size = size
Cookies.set('size', size)
},
SET_SIDEBAR_HIDE: (state, status) => {
state.sidebar.hide = status
},
SET_LANG: (state, lang) => {
state.lang = lang
Cookies.set('lang', lang)
},
}
}
})
const actions = {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar({ commit }) {
commit('CLOSE_SIDEBAR', '')
},
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
},
setSize({ commit }, size) {
commit('SET_SIZE', size)
},
toggleSideBarHide({ commit }, status) {
commit('SET_SIDEBAR_HIDE', status)
},
setLang({ commit }, lang) {
commit('SET_LANG', lang)
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
export default useAppStore

49
src/store/modules/permission.js
View File

@ -8,30 +8,29 @@ import InnerLink from '@/layout/components/InnerLink'
const modules =
import.meta.glob('./../../views/**/*.vue')
const permission = {
state: {
const usePermissionStore = defineStore('permission', {
state: () => ({
routes: [],
defaultRoutes: [],
topbarRouters: [],
sidebarRouters: []
},
mutations: {
SET_ROUTES: (state, routes) => {
state.routes = constantRoutes.concat(routes)
},
SET_DEFAULT_ROUTES: (state, routes) => {
state.defaultRoutes = constantRoutes.concat(routes)
},
SET_TOPBAR_ROUTES: (state, routes) => {
state.topbarRouters = routes
},
SET_SIDEBAR_ROUTERS: (state, routes) => {
state.sidebarRouters = routes
},
},
sidebarRouters: []
}),
actions: {
setRoutes(routes) {
this.addRoutes = routes
this.routes = constantRoutes.concat(routes)
},
setDefaultRoutes(routes) {
this.defaultRoutes = constantRoutes.concat(routes)
},
setTopbarRoutes(routes) {
this.topbarRouters = routes
},
setSidebarRouters(routes) {
this.sidebarRouters = routes
},
// 生成路由
GenerateRoutes({ commit }) {
generateRoutes() {
return new Promise(resolve => {
// 向后端请求路由数据
getRouters().then(res => {
@ -41,16 +40,16 @@ const permission = {
const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
//const defaultRoutes = filterAsyncRouter(defaultData)
commit('SET_ROUTES', rewriteRoutes)
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
commit('SET_DEFAULT_ROUTES', sidebarRoutes)
commit('SET_TOPBAR_ROUTES', sidebarRoutes)
this.setRoutes(rewriteRoutes)
this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
this.setDefaultRoutes(sidebarRoutes)
this.setTopbarRoutes(sidebarRoutes)
resolve(rewriteRoutes)
})
})
}
}
}
})
// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
@ -117,4 +116,4 @@ export const loadView = (view) => {
return res;
}
export default permission
export default usePermissionStore

85
src/store/modules/settings.js
View File

@ -4,41 +4,58 @@ import { useDynamicTitle } from '@/utils/dynamicTitle'
const { sideTheme, theme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle, showFooter } = defaultSettings
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
const state = {
title: '',
theme: storageSetting.theme || theme,
sideTheme: storageSetting.sideTheme || sideTheme,
showSettings: showSettings,
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
showFooter: storageSetting.showFooter === undefined ? showFooter : storageSetting.showFooter
}
const mutations = {
CHANGE_SETTING: (state, { key, value }) => {
if (state.hasOwnProperty(key)) {
state[key] = value
const useSettingsStore = defineStore('settings', {
state: () => ({
title: '',
theme: storageSetting.theme || theme,
sideTheme: storageSetting.sideTheme || sideTheme,
showSettings: showSettings,
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
showFooter: storageSetting.showFooter === undefined ? showFooter : storageSetting.showFooter
}),
actions: {
// 修改布局设置
changeSetting(data) {
const { key, value } = data
if (this.hasOwnProperty(key)) {
this[key] = value
}
},
// 设置网页标题
setTitle(title) {
this.title = title
useDynamicTitle();
}
}
}
})
export default useSettingsStore
// const mutations = {
// CHANGE_SETTING: (state, { key, value }) => {
// if (state.hasOwnProperty(key)) {
// state[key] = value
// }
// }
// }
const actions = {
// 修改布局设置
changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data)
},
// 设置网页标题
setTitle({ commit }, title) {
state.title = title
useDynamicTitle();
}
}
// const actions = {
// // 修改布局设置
// changeSetting({ commit }, data) {
// commit('CHANGE_SETTING', data)
// },
// // 设置网页标题
// setTitle({ commit }, title) {
// state.title = title
// useDynamicTitle();
// }
// }
export default {
namespaced: true,
state,
mutations,
actions
}
// export default {
// namespaced: true,
// state,
// mutations,
// actions
// }

58
src/store/modules/socket.js
View File

@ -1,37 +1,23 @@
const state = {
onlineNum: 0,
onlineUsers: [],
noticeList: []
}
const mutations = {
SET_ONLINEUSER_NUM: (state, num) => {
state.onlineNum = num
},
SET_NOTICE_list: (state, data) => {
state.noticeList = data;
},
SET_ONLINE_USERS: (state, data) => {
state.onlineUsers = data;
const useSocketStore = defineStore('socket', {
state: () => ({
onlineNum: 0,
onlineUsers: [],
noticeList: [],
noticeDot: false
}),
actions: {
//更新在线人数
setOnlineUserNum(num) {
this.onlineNum = num
},
// 更新系统通知
setNoticeList(data) {
this.noticeList = data
this.noticeDot = data.length > 0
},
setOnlineUsers(data) {
this.onlineUsers = data
}
}
}
const actions = {
//更新在线人数
changeOnlineNum({ commit }, data) {
commit('SET_ONLINEUSER_NUM', data)
},
// 更新系统通知
getNoticeList({ commit }, data) {
commit('SET_NOTICE_list', data)
},
getOnlineUsers({ commit }, data) {
commit('SET_ONLINE_USERS', data)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
})
export default useSocketStore

357
src/store/modules/tagsView.js
View File

@ -1,207 +1,156 @@
const state = {
visitedViews: [],
cachedViews: []
}
const mutations = {
ADD_VISITED_VIEW: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-name'
})
)
},
ADD_CACHED_VIEW: (state, view) => {
if (state.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
}
},
DEL_VISITED_VIEW: (state, view) => {
for (const [i, v] of state.visitedViews.entries()) {
if (v.path === view.path) {
state.visitedViews.splice(i, 1)
break
const useTagsViewStore = defineStore(
'tagsView',
{
state: () => ({
visitedViews: [],
cachedViews: []
}),
actions: {
addView(view) {
this.addVisitedView(view)
this.addCachedView(view)
},
addVisitedView(view) {
if (this.visitedViews.some(v => v.path === view.path)) return
this.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-name'
})
)
},
addCachedView(view) {
if (this.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
this.cachedViews.push(view.name)
}
},
delView(view) {
return new Promise(resolve => {
this.delVisitedView(view)
this.delCachedView(view)
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
},
delVisitedView(view) {
return new Promise(resolve => {
for (const [i, v] of this.visitedViews.entries()) {
if (v.path === view.path) {
this.visitedViews.splice(i, 1)
break
}
}
resolve([...this.visitedViews])
})
},
delCachedView(view) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
resolve([...this.cachedViews])
})
},
delOthersViews(view) {
return new Promise(resolve => {
this.delOthersVisitedViews(view)
this.delOthersCachedViews(view)
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
},
delOthersVisitedViews(view) {
return new Promise(resolve => {
this.visitedViews = this.visitedViews.filter(v => {
return v.meta.affix || v.path === view.path
})
resolve([...this.visitedViews])
})
},
delOthersCachedViews(view) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
if (index > -1) {
this.cachedViews = this.cachedViews.slice(index, index + 1)
} else {
this.cachedViews = []
}
resolve([...this.cachedViews])
})
},
delAllViews(view) {
return new Promise(resolve => {
this.delAllVisitedViews(view)
this.delAllCachedViews(view)
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
},
delAllVisitedViews(view) {
return new Promise(resolve => {
const affixTags = this.visitedViews.filter(tag => tag.meta.affix)
this.visitedViews = affixTags
resolve([...this.visitedViews])
})
},
delAllCachedViews(view) {
return new Promise(resolve => {
this.cachedViews = []
resolve([...this.cachedViews])
})
},
updateVisitedView(view) {
for (let v of this.visitedViews) {
if (v.path === view.path) {
v = Object.assign(v, view)
break
}
}
},
delRightTags(view) {
return new Promise(resolve => {
const index = this.visitedViews.findIndex(v => v.path === view.path)
if (index === -1) {
return
}
this.visitedViews = this.visitedViews.filter((item, idx) => {
if (idx <= index || (item.meta && item.meta.affix)) {
return true
}
const i = this.cachedViews.indexOf(item.name)
if (i > -1) {
this.cachedViews.splice(i, 1)
}
return false
})
resolve([...this.visitedViews])
})
},
delLeftTags(view) {
return new Promise(resolve => {
const index = this.visitedViews.findIndex(v => v.path === view.path)
if (index === -1) {
return
}
this.visitedViews = this.visitedViews.filter((item, idx) => {
if (idx >= index || (item.meta && item.meta.affix)) {
return true
}
const i = this.cachedViews.indexOf(item.name)
if (i > -1) {
this.cachedViews.splice(i, 1)
}
return false
})
resolve([...this.visitedViews])
})
}
}
},
DEL_CACHED_VIEW: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
index > -1 && state.cachedViews.splice(index, 1)
},
})
DEL_OTHERS_VISITED_VIEWS: (state, view) => {
state.visitedViews = state.visitedViews.filter(v => {
return v.meta.affix || v.path === view.path
})
},
DEL_OTHERS_CACHED_VIEWS: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
if (index > -1) {
state.cachedViews = state.cachedViews.slice(index, index + 1)
} else {
state.cachedViews = []
}
},
DEL_ALL_VISITED_VIEWS: state => {
// keep affix tags
const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
state.visitedViews = affixTags
},
DEL_ALL_CACHED_VIEWS: state => {
state.cachedViews = []
},
UPDATE_VISITED_VIEW: (state, view) => {
for (let v of state.visitedViews) {
if (v.path === view.path) {
v = Object.assign(v, view)
break
}
}
},
DEL_RIGHT_VIEWS: (state, view) => {
const index = state.visitedViews.findIndex(v => v.path === view.path)
if (index === -1) {
return
}
state.visitedViews = state.visitedViews.filter((item, idx) => {
if (idx <= index || (item.meta && item.meta.affix)) {
return true
}
const i = state.cachedViews.indexOf(item.name)
if (i > -1) {
state.cachedViews.splice(i, 1)
}
return false
})
},
DEL_LEFT_VIEWS: (state, view) => {
const index = state.visitedViews.findIndex(v => v.path === view.path)
if (index === -1) {
return
}
state.visitedViews = state.visitedViews.filter((item, idx) => {
if (idx >= index || (item.meta && item.meta.affix)) {
return true
}
const i = state.cachedViews.indexOf(item.name)
if (i > -1) {
state.cachedViews.splice(i, 1)
}
return false
})
}
}
const actions = {
addView({ dispatch }, view) {
dispatch('addVisitedView', view)
dispatch('addCachedView', view)
},
addVisitedView({ commit }, view) {
commit('ADD_VISITED_VIEW', view)
},
addCachedView({ commit }, view) {
commit('ADD_CACHED_VIEW', view)
},
delView({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delVisitedView', view)
dispatch('delCachedView', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delVisitedView({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_VISITED_VIEW', view)
resolve([...state.visitedViews])
})
},
delCachedView({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_CACHED_VIEW', view)
resolve([...state.cachedViews])
})
},
delOthersViews({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delOthersVisitedViews', view)
dispatch('delOthersCachedViews', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delOthersVisitedViews({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_OTHERS_VISITED_VIEWS', view)
resolve([...state.visitedViews])
})
},
delOthersCachedViews({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_OTHERS_CACHED_VIEWS', view)
resolve([...state.cachedViews])
})
},
delAllViews({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delAllVisitedViews', view)
dispatch('delAllCachedViews', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delAllVisitedViews({ commit, state }) {
return new Promise(resolve => {
commit('DEL_ALL_VISITED_VIEWS')
resolve([...state.visitedViews])
})
},
delAllCachedViews({ commit, state }) {
return new Promise(resolve => {
commit('DEL_ALL_CACHED_VIEWS')
resolve([...state.cachedViews])
})
},
updateVisitedView({ commit }, view) {
commit('UPDATE_VISITED_VIEW', view)
},
delRightTags({ commit }, view) {
return new Promise(resolve => {
commit('DEL_RIGHT_VIEWS', view)
resolve([...state.visitedViews])
})
},
delLeftTags({ commit }, view) {
return new Promise(resolve => {
commit('DEL_LEFT_VIEWS', view)
resolve([...state.visitedViews])
})
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
export default useTagsViewStore

76
src/store/modules/user.js
View File

@ -2,40 +2,19 @@ import { login, logout, getInfo } from '@/api/system/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import defAva from '@/assets/images/profile.jpg'
const user = {
state: {
const useUserStore = defineStore('user', {
state: () => ({
userInfo: '',
token: getToken(),
name: '',
avatar: '',
roles: [],
permissions: []
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
},
SET_USERINFO: (state, value) => {
state.userInfo = value
}
},
permissions: [],
userId: 0
}),
actions: {
// 登录
Login({ commit }, userInfo) {
login(userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
@ -44,8 +23,7 @@ const user = {
login(username, password, code, uuid).then(res => {
if (res.code == 200) {
setToken(res.data)
//提交上面的mutaions方法
commit('SET_TOKEN', res.data)
this.token = res.data
resolve() //then处理
} else {
console.log('login error ', res)
@ -55,25 +33,24 @@ const user = {
reject(error)
})
})
},
// 获取用户信息
GetInfo({ commit, state }) {
}, // 获取用户信息
getInfo() {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const data = res.data
const avatar = data.user.avatar == "" ? defAva : data.user.avatar;
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
commit('SET_PERMISSIONS', data.permissions)
this.roles = data.roles
this.permissions = data.permissions
} else {
commit('SET_ROLES', ['ROLE_DEFAULT'])
this.roles = ['ROLE_DEFAULT']
}
commit('SET_NAME', data.user.nickName)
commit('SET_AVATAR', avatar)
commit('SET_USERINFO', data.user) //新加
this.name = data.user.nickName
this.avatar = avatar
this.userInfo = data.user //新加
this.userId = data.user.userId//新加
resolve(res)
}).catch(error => {
console.error(error);
@ -81,14 +58,13 @@ const user = {
})
})
},
// 退出系统
LogOut({ commit, state }) {
logOut() {
return new Promise((resolve, reject) => {
logout(state.token).then((res) => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
logout(this.token).then((res) => {
this.token = ''
this.roles = []
this.permissions = []
removeToken()
resolve(res)
}).catch(error => {
@ -96,16 +72,14 @@ const user = {
})
})
},
// 前端 登出
FedLogOut({ commit }) {
fedLogOut() {
return new Promise(resolve => {
commit('SET_TOKEN', '')
this.token = ''
removeToken()
resolve()
})
}
}
}
export default user
})
export default useUserStore

6
src/utils/dynamicTitle.js
View File

@ -1,12 +1,14 @@
import store from '@/store'
import defaultSettings from '@/settings'
import useSettingsStore from '@/store/modules/settings'
/**
* 动态修改标题
*/
export function useDynamicTitle() {
if (store.state.settings.dynamicTitle) {
document.title = store.state.settings.title + ' - ' + defaultSettings.title;
const settingsStore = useSettingsStore()
if (settingsStore.dynamicTitle) {
document.title = settingsStore.title + ' - ' + defaultSettings.title;
} else {
document.title = defaultSettings.title;
}

51
src/utils/permission.js
View File

@ -1,51 +0,0 @@
import store from '@/store'
/**
* 字符权限校验
* @param {Array} value 校验值
* @returns {Boolean}
*/
export function checkPermi(value) {
if (value && value instanceof Array && value.length > 0) {
const permissions = store.getters && store.getters.permissions
const permissionDatas = value
const all_permission = "*:*:*";
const hasPermission = permissions.some(permission => {
return all_permission === permission || permissionDatas.includes(permission)
})
if (!hasPermission) {
return false
}
return true
} else {
console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
return false
}
}
/**
* 角色权限校验
* @param {Array} value 校验值
* @returns {Boolean}
*/
export function checkRole(value) {
if (value && value instanceof Array && value.length > 0) {
const roles = store.getters && store.getters.roles
const permissionRoles = value
const super_admin = "admin";
const hasRole = roles.some(role => {
return super_admin === role || permissionRoles.includes(role)
})
if (!hasRole) {
return false
}
return true
} else {
console.error(`need roles! Like checkRole="['admin','editor']"`)
return false
}
}

6
src/utils/request.js
View File

@ -1,7 +1,7 @@
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'
import store from '@/store'
import { getToken } from '@/utils/auth'
import useUserStore from '@/store/modules/user'
// 解决后端跨域获取不到cookie问题
// axios.defaults.withCredentials = true
@ -20,7 +20,7 @@ service.interceptors.request.use(config => {
if (getToken()) {
//将token放到请求头发送给服务器,将tokenkey放在请求头中
config.headers['Authorization'] = 'Bearer ' + getToken();
config.headers['userid'] = store.getters.userId;
config.headers['userid'] = useUserStore().userId;
}
return config;
}, error => {
@ -46,7 +46,7 @@ service.interceptors.response.use(res => {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('LogOut').then(() => {
useUserStore().logOut().then(() => {
location.href =
import.meta.env.VITE_APP_ROUTER_PREFIX + 'index';
})

14
src/utils/signalR.js
View File

@ -1,10 +1,9 @@
// 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
import * as signalR from '@microsoft/signalr'
import store from '../store'
import { getToken } from '@/utils/auth'
import { ElNotification } from 'element-plus'
import { useWebNotification } from '@vueuse/core'
import useSocketStore from '@/store/modules/socket'
export default {
// signalR对象
SR: {},
@ -49,8 +48,8 @@ export default {
return true
} catch (error) {
that.failNum--;
console.log(`失败重试剩余次数${that.failNum}`, error)
if (that.failNum > 0) {
// console.log(`失败重试剩余次数${that.failNum}`, error)
if (that.failNum > 0 && this.SR.state.Disconnected) {
setTimeout(async () => {
await this.SR.start()
}, 5000)
@ -61,11 +60,10 @@ export default {
// 接收消息处理
receiveMsg(connection) {
connection.on("onlineNum", (data) => {
store.dispatch("socket/changeOnlineNum", data);
useSocketStore().setOnlineUserNum(data)
});
// 接收欢迎语
connection.on("welcome", (data) => {
console.log('welcome', data)
ElNotification.info(data)
});
// 接收后台手动推送消息
@ -91,13 +89,13 @@ export default {
// 接收系统通知/公告
connection.on("moreNotice", (data) => {
if (data.code == 200) {
store.dispatch("socket/getNoticeList", data.data);
useSocketStore().setNoticeList(data.data)
}
})
// 接收在线用户
connection.on("onlineUser", (data) => {
store.dispatch("socket/getOnlineUsers", data);
useSocketStore().setOnlineUsers(data)
})
}
}

3
src/views/dashboard/PanelGroup.vue
View File

@ -49,13 +49,14 @@
<script setup>
import { CountUp } from 'countup.js'
import useSocketStore from '@/store/modules/socket';
const emit = defineEmits()
const { proxy } = getCurrentInstance()
const state = reactive({
chatNum: 1390,
onlineNum: computed(() => {
return proxy.$store.getters.onlineUserNum
return useSocketStore().onlineNum
}),
amount: 99998,
order: 1999,

7
src/views/index_v1.vue
View File

@ -130,6 +130,9 @@ import WordCloudChat from './dashboard/WordCloud.vue'
import dayjs from 'dayjs'
import useUserStore from '@/store/modules/user'
import useSocketStore from '@/store/modules/socket'
const data = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
@ -200,13 +203,13 @@ const data = {
}
const { proxy } = getCurrentInstance()
const userInfo = computed(() => {
return proxy.$store.getters.userinfo
return useUserStore().userInfo
})
const currentTime = computed(() => {
return proxy.parseTime(new Date())
})
const onlineUsers = computed(() => {
return proxy.$store.getters.onlineUsers
return useSocketStore().onlineUsers
})
let lineChartData = reactive([])

7
src/views/login.vue
View File

@ -69,8 +69,9 @@ import { encrypt, decrypt } from '@/utils/jsencrypt'
import defaultSettings from '@/settings'
import starBackground from '@/views/components/starBackground.vue'
import LangSelect from '@/components/LangSelect/index.vue'
import useUserStore from '@/store/modules/user'
const store = useStore()
const userStore = useUserStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
@ -118,8 +119,8 @@ function handleLogin() {
Cookies.remove('rememberMe')
}
// 调用action的登录方法
store
.dispatch('Login', loginForm.value)
userStore
.login(loginForm.value)
.then(() => {
proxy.$modal.msgSuccess(proxy.$t('login.loginSuccess'))
router.push({ path: redirect.value || '/' })

142
src/views/system/user/profile/operLog.vue
View File

@ -1,50 +1,55 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-form-item>
<el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="YYYY-MM-DD" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-form-item>
<el-date-picker
v-model="dateRange"
size="small"
style="width: 240px"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list">
<!-- <el-table-column label="编号" align="center" prop="operId" width="60px" :show-overflow-tooltip="true" /> -->
<el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
<el-table-column prop="businessType" label="业务类型" align="center">
<template #default="scope">
<dict-tag :options="businessTypeOptions" :value="scope.row.businessType" />
</template>
</el-table-column>
<el-table-column label="请求方式" align="center" prop="requestMethod" />
<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
<el-table-column label="操作状态" align="center" prop="status">
<template #default="{ row }">
<dict-tag :options="statusOptions" :value="row.status"></dict-tag>
</template>
</el-table-column>
<el-table v-loading="loading" :data="list">
<!-- <el-table-column label="编号" align="center" prop="operId" width="60px" :show-overflow-tooltip="true" /> -->
<el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
<el-table-column prop="businessType" label="业务类型" align="center">
<template #default="scope">
<dict-tag :options="businessTypeOptions" :value="scope.row.businessType" />
</template>
</el-table-column>
<el-table-column label="请求方式" align="center" prop="requestMethod" />
<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
<el-table-column label="操作状态" align="center" prop="status">
<template #default="{ row }">
<dict-tag :options="statusOptions" :value="row.status"></dict-tag>
</template>
</el-table-column>
<el-table-column label="日志内容" align="center" prop="errorMsg" :show-overflow-tooltip="true" />
<el-table-column label="操作日期" align="center" prop="operTime" width="180">
<template #default="scope">
<span>{{ scope.row.operTime }}</span>
</template>
</el-table-column>
</el-table>
<el-table-column label="日志内容" align="center" prop="errorMsg" :show-overflow-tooltip="true" />
<el-table-column label="操作日期" align="center" prop="operTime" width="180">
<template #default="scope">
<span>{{ scope.row.operTime }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</div>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</div>
</template>
<script setup name="operlog">
import { list as queryLog } from '@/api/monitor/operlog'
import useUserStore from '@/store/modules/user'
// 遮罩层
const loading = ref(true)
// 总条数
@ -60,53 +65,50 @@ const dateRange = ref([])
// 查询参数
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
title: undefined,
operName: undefined,
businessType: undefined,
status: undefined,
pageNum: 1,
pageSize: 10,
title: undefined,
operName: undefined,
businessType: undefined,
status: undefined,
})
const { proxy } = getCurrentInstance()
var dictParams = [
{ dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
{ dictType: 'sys_common_status', columnName: 'statusOptions' },
{ dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
{ dictType: 'sys_common_status', columnName: 'statusOptions' },
]
proxy.getDicts(dictParams).then((response) => {
response.data.forEach((element) => {
proxy[element.columnName] = element.list
})
response.data.forEach((element) => {
proxy[element.columnName] = element.list
})
})
/** 查询登录日志 */
function getList() {
loading.value = true
queryParams.operName = proxy.$store.getters.userinfo.userName
queryLog(proxy.addDateRange(queryParams, dateRange.value)).then(
(response) => {
loading.value = false
if (response.code == 200) {
list.value = response.data.result
total.value = response.data.totalNum
} else {
total.value = 0
list.value = []
}
}
)
loading.value = true
queryParams.operName = useUserStore().userInfo.userName
queryLog(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
loading.value = false
if (response.code == 200) {
list.value = response.data.result
total.value = response.data.totalNum
} else {
total.value = 0
list.value = []
}
})
}
/** 重置按钮操作 */
function resetQuery() {
dateRange.value = []
proxy.resetForm('queryForm')
handleQuery()
dateRange.value = []
proxy.resetForm('queryForm')
handleQuery()
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.pageNum = 1
getList()
queryParams.pageNum = 1
getList()
}
getList()
</script>

11
src/views/system/user/profile/userAvatar.vue
View File

@ -57,6 +57,7 @@
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
import { uploadAvatar } from '@/api/system/user'
import useUserStore from '@/store/modules/user'
export default {
components: {
@ -69,7 +70,7 @@ export default {
},
},
setup() {
const store = useStore()
const useStore = useUserStore()
const { proxy } = getCurrentInstance()
const open = ref(false)
@ -78,7 +79,7 @@ export default {
const fileName = ref('')
//图片裁剪数据
const options = reactive({
img: store.getters.avatar, // 裁剪图片的地址
img: useStore.avatar, // 裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
@ -126,12 +127,12 @@ export default {
function uploadImg() {
proxy.$refs.cropper.getCropBlob((data) => {
let formData = new FormData()
var fileOfBlob = new File([data], fileName.value);
var fileOfBlob = new File([data], fileName.value)
formData.append('picture', fileOfBlob)
uploadAvatar(formData).then((response) => {
open.value = false
options.img = response.data.imgUrl
store.commit('SET_AVATAR', options.img)
useStore.avatar = options.img
proxy.$modal.msgSuccess('修改成功')
visible.value = false
})
@ -143,7 +144,7 @@ export default {
}
/** 关闭窗口 */
function closeDialog() {
options.img = store.getters.avatar
options.img = useStore.avatar
options.visible = false
}

4
vite/plugins/auto-import.js
View File

@ -5,9 +5,7 @@ export default function createAutoImport() {
imports: [
'vue',
'vue-router',
{
'vuex': ['useStore']
}
'pinia'
],
dts: "src/auto-import.d.ts" // 生成 `auto-import.d.ts` 全局声明
})