修改了 README
This commit is contained in:
TermiNexus committed
1 parent
9ea096538b
commit
2b7e02108c
5 files changed
+496
-1
No files matched your search
@@ -1,4 +1,6 @@
|
|||||||
# Vue 3 + TypeScript + Vite
|
# GERP
|
||||||
|
|
||||||
|
An ERP backend built using Vue, TypeScript, and Vite, handed over for use in the SAAS scenarios under GVSDS.
|
||||||
|
|
||||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,259 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { useAppStore } from '@/stores/app'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
import { getAvatarUrl } from '@/api/auth'
|
||||||
|
|
||||||
|
const appStore = useAppStore()
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
// 顶部导航标题（取路由 meta.title）
|
||||||
|
const navTitle = computed(() => (route.meta.title as string) || 'GERP')
|
||||||
|
|
||||||
|
// 当前激活的菜单路径
|
||||||
|
const activeMenu = computed(() => route.path)
|
||||||
|
|
||||||
|
// 头像 URL
|
||||||
|
const avatarUrl = getAvatarUrl()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
appStore.initTheme()
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleMenuSelect(index: string): void {
|
||||||
|
router.push(index)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleLogout(): Promise<void> {
|
||||||
|
await userStore.logout()
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleToggleSidebar(): void {
|
||||||
|
appStore.toggleSidebar()
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleToggleTheme(): void {
|
||||||
|
appStore.toggleTheme()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="gerp-layout">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<header class="gerp-header">
|
||||||
|
<div class="gerp-header-left">
|
||||||
|
<el-button text class="gerp-toggle-btn" @click="handleToggleSidebar">
|
||||||
|
<el-icon :size="18"><Menu /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
<div class="gerp-logo">
|
||||||
|
<img src="/favicon.svg" alt="logo" class="gerp-logo-icon" />
|
||||||
|
<span class="gerp-logo-text">GERP 管理系统</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gerp-header-center">
|
||||||
|
<h1 class="gerp-nav-title">{{ navTitle }}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gerp-header-right">
|
||||||
|
<div class="gerp-header-actions">
|
||||||
|
<el-button text circle title="搜索">
|
||||||
|
<el-icon><Search /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
<el-badge :value="3" class="gerp-notify-badge">
|
||||||
|
<el-button text circle title="通知">
|
||||||
|
<el-icon><Bell /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-button text circle title="主题" @click="handleToggleTheme">
|
||||||
|
<el-icon><Setting /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dropdown trigger="click" @command="(cmd) => cmd === 'logout' && handleLogout()">
|
||||||
|
<div class="gerp-user-info">
|
||||||
|
<img :src="avatarUrl" alt="头像" class="gerp-user-avatar" />
|
||||||
|
<span class="gerp-user-name">{{ userStore.displayName }}</span>
|
||||||
|
<el-icon><ArrowDown /></el-icon>
|
||||||
|
</div>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item @click="router.push('/profile')">
|
||||||
|
<el-icon><User /></el-icon>个人中心
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item divided command="logout">
|
||||||
|
<el-icon><SwitchButton /></el-icon>退出登录
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="gerp-main">
|
||||||
|
<!-- 侧边栏 -->
|
||||||
|
<aside class="gerp-sidebar" :class="{ collapsed: appStore.sidebarCollapsed }">
|
||||||
|
<el-scrollbar>
|
||||||
|
<el-menu
|
||||||
|
:default-active="activeMenu"
|
||||||
|
:collapse="appStore.sidebarCollapsed"
|
||||||
|
:collapse-transition="false"
|
||||||
|
router
|
||||||
|
@select="handleMenuSelect"
|
||||||
|
>
|
||||||
|
<template v-for="menu in userStore.menus" :key="menu.Path || menu.Title">
|
||||||
|
<!-- 含子菜单 -->
|
||||||
|
<el-sub-menu v-if="menu.Children?.length" :index="menu.Path || menu.Title">
|
||||||
|
<template #title>
|
||||||
|
<el-icon v-if="menu.Icon"><component :is="menu.Icon" /></el-icon>
|
||||||
|
<span>{{ menu.Title }}</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item
|
||||||
|
v-for="child in menu.Children"
|
||||||
|
:key="child.Path || child.Title"
|
||||||
|
:index="child.Path || ''"
|
||||||
|
>
|
||||||
|
<el-icon v-if="child.Icon"><component :is="child.Icon" /></el-icon>
|
||||||
|
<template #title>{{ child.Title }}</template>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-sub-menu>
|
||||||
|
|
||||||
|
<!-- 无子菜单 -->
|
||||||
|
<el-menu-item v-else :index="menu.Path || ''">
|
||||||
|
<el-icon v-if="menu.Icon"><component :is="menu.Icon" /></el-icon>
|
||||||
|
<template #title>{{ menu.Title }}</template>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-menu>
|
||||||
|
</el-scrollbar>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<main class="gerp-content">
|
||||||
|
<RouterView v-slot="{ Component }">
|
||||||
|
<component :is="Component" />
|
||||||
|
</RouterView>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.gerp-layout {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 56px;
|
||||||
|
padding: 0 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid var(--gerp-border-color);
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-header-left,
|
||||||
|
.gerp-header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-toggle-btn {
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-nav-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-user-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-user-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-main {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-sidebar {
|
||||||
|
width: 220px;
|
||||||
|
background: #fff;
|
||||||
|
border-right: 1px solid var(--gerp-border-color);
|
||||||
|
transition: width 0.2s;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
width: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-menu) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gerp-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 16px;
|
||||||
|
background: var(--gerp-bg-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
|
||||||
|
/** 静态路由（无需权限） */
|
||||||
|
export const staticRoutes: RouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import('@/views/Login.vue'),
|
||||||
|
meta: { title: '登录', requiresAuth: false, layout: 'blank' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import('@/layouts/DefaultLayout.vue'),
|
||||||
|
redirect: '/dashboard',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'dashboard',
|
||||||
|
name: 'Dashboard',
|
||||||
|
component: () => import('@/views/Dashboard.vue'),
|
||||||
|
meta: { title: '仪表盘', icon: 'Odometer', requiresAuth: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'profile',
|
||||||
|
name: 'Profile',
|
||||||
|
component: () => import('@/views/Profile.vue'),
|
||||||
|
meta: { title: '个人中心', icon: 'User', requiresAuth: true },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/:pathMatch(.*)*',
|
||||||
|
name: 'NotFound',
|
||||||
|
component: () => import('@/views/NotFound.vue'),
|
||||||
|
meta: { title: '页面不存在', requiresAuth: false, layout: 'blank' },
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
/** 动态路由（从后端菜单加载后注入） */
|
||||||
|
export const dynamicRoutes: RouteRecordRaw[] = []
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes: staticRoutes,
|
||||||
|
scrollBehavior(_to, _from, savedPosition) {
|
||||||
|
return savedPosition || { top: 0 }
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 全局前置守卫：登录态校验、动态路由注入 */
|
||||||
|
router.beforeEach(async (to, _from, next) => {
|
||||||
|
// 设置页面标题
|
||||||
|
document.title = (to.meta.title as string) || 'GERP 管理系统'
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
// 不需要登录的页面直接放行
|
||||||
|
if (to.meta.requiresAuth === false) {
|
||||||
|
next()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 已登录但未加载用户信息：尝试加载
|
||||||
|
if (!userStore.isLoggedIn) {
|
||||||
|
try {
|
||||||
|
await userStore.fetchUserInfo()
|
||||||
|
await userStore.fetchMenus()
|
||||||
|
// TODO: 注入动态路由后 next({ ...to, replace: true })
|
||||||
|
} catch {
|
||||||
|
// 加载失败：跳转登录
|
||||||
|
next({ name: 'Login', query: { redirect: to.fullPath } })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
next()
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
/** 应用状态：侧边栏折叠、主题、语言等全局 UI 状态 */
|
||||||
|
export const useAppStore = defineStore('app', () => {
|
||||||
|
/** 侧边栏是否折叠 */
|
||||||
|
const sidebarCollapsed = ref(false)
|
||||||
|
/** 当前主题：light / dark */
|
||||||
|
const theme = ref<'light' | 'dark'>('light')
|
||||||
|
/** 当前语言 */
|
||||||
|
const locale = ref<'zh-CN' | 'en-US'>('zh-CN')
|
||||||
|
|
||||||
|
/** 切换侧边栏 */
|
||||||
|
function toggleSidebar(): void {
|
||||||
|
sidebarCollapsed.value = !sidebarCollapsed.value
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 设置主题 */
|
||||||
|
function setTheme(value: 'light' | 'dark'): void {
|
||||||
|
theme.value = value
|
||||||
|
document.documentElement.classList.toggle('dark', value === 'dark')
|
||||||
|
localStorage.setItem('gerp-theme', value)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化主题（从 localStorage 恢复） */
|
||||||
|
function initTheme(): void {
|
||||||
|
const saved = localStorage.getItem('gerp-theme') as 'light' | 'dark' | null
|
||||||
|
if (saved) setTheme(saved)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 切换主题 */
|
||||||
|
function toggleTheme(): void {
|
||||||
|
setTheme(theme.value === 'light' ? 'dark' : 'light')
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
sidebarCollapsed,
|
||||||
|
theme,
|
||||||
|
locale,
|
||||||
|
toggleSidebar,
|
||||||
|
setTheme,
|
||||||
|
initTheme,
|
||||||
|
toggleTheme,
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,110 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import type { UserInfo, MenuItem } from '@/types/api'
|
||||||
|
import { getCurrentUser, getUserRoles, login as apiLogin, logout as apiLogout, type LoginParams } from '@/api/auth'
|
||||||
|
import { getMenuList } from '@/api/menu'
|
||||||
|
|
||||||
|
/** 用户状态管理：当前登录用户、角色、菜单、权限 */
|
||||||
|
export const useUserStore = defineStore('user', () => {
|
||||||
|
// === 状态 ===
|
||||||
|
const userInfo = ref<UserInfo | null>(null)
|
||||||
|
const roles = ref<string[]>([])
|
||||||
|
const menus = ref<MenuItem[]>([])
|
||||||
|
const token = ref<string>('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// === 计算属性 ===
|
||||||
|
const isLoggedIn = computed(() => !!userInfo.value)
|
||||||
|
const isAdmin = computed(() => userInfo.value?.IsAdmin === true)
|
||||||
|
const currentRole = computed(() => userInfo.value?.CurrentRole || '')
|
||||||
|
const avatar = computed(() => userInfo.value?.Avatar || '')
|
||||||
|
const displayName = computed(() => userInfo.value?.DisplayName || userInfo.value?.UserName || '未登录')
|
||||||
|
|
||||||
|
/** 扁平化后的菜单（用于面包屑、菜单搜索） */
|
||||||
|
const flatMenus = computed<MenuItem[]>(() => {
|
||||||
|
const result: MenuItem[] = []
|
||||||
|
const walk = (items: MenuItem[]) => {
|
||||||
|
for (const item of items) {
|
||||||
|
result.push(item)
|
||||||
|
if (item.Children?.length) walk(item.Children)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
walk(menus.value)
|
||||||
|
return result
|
||||||
|
})
|
||||||
|
|
||||||
|
// === 动作 ===
|
||||||
|
/** 登录 */
|
||||||
|
async function login(params: LoginParams): Promise<void> {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
await apiLogin(params)
|
||||||
|
await fetchUserInfo()
|
||||||
|
await fetchMenus()
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 注销 */
|
||||||
|
async function logout(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await apiLogout()
|
||||||
|
} finally {
|
||||||
|
reset()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取当前用户信息 */
|
||||||
|
async function fetchUserInfo(): Promise<UserInfo> {
|
||||||
|
const info = await getCurrentUser()
|
||||||
|
userInfo.value = info
|
||||||
|
return info
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取角色列表 */
|
||||||
|
async function fetchRoles(): Promise<string[]> {
|
||||||
|
const list = await getUserRoles()
|
||||||
|
roles.value = list
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取菜单 */
|
||||||
|
async function fetchMenus(): Promise<MenuItem[]> {
|
||||||
|
const list = await getMenuList()
|
||||||
|
menus.value = list
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置状态（登出或登录失效时调用） */
|
||||||
|
function reset(): void {
|
||||||
|
userInfo.value = null
|
||||||
|
roles.value = []
|
||||||
|
menus.value = []
|
||||||
|
token.value = ''
|
||||||
|
localStorage.removeItem('gerp-user')
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// 状态
|
||||||
|
userInfo,
|
||||||
|
roles,
|
||||||
|
menus,
|
||||||
|
token,
|
||||||
|
loading,
|
||||||
|
// 计算属性
|
||||||
|
isLoggedIn,
|
||||||
|
isAdmin,
|
||||||
|
currentRole,
|
||||||
|
avatar,
|
||||||
|
displayName,
|
||||||
|
flatMenus,
|
||||||
|
// 动作
|
||||||
|
login,
|
||||||
|
logout,
|
||||||
|
fetchUserInfo,
|
||||||
|
fetchRoles,
|
||||||
|
fetchMenus,
|
||||||
|
reset,
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in new issue
Block a user