初始化基础框架
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
|
||||
charset = utf-8
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
indent_style = tab
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
end_of_line = lf
|
||||
|
||||
@@ -2,5 +2,7 @@
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100
|
||||
}
|
||||
"printWidth": 260,
|
||||
"useTabs": true,
|
||||
"tabWidth": 4
|
||||
}
|
||||
24
src/App.vue
24
src/App.vue
@@ -1,11 +1,23 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<h1>You did it!</h1>
|
||||
<p>
|
||||
Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
|
||||
documentation
|
||||
</p>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
3
src/config/index.js
Normal file
3
src/config/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
app_title: 'vueadmin'
|
||||
}
|
||||
160
src/layouts/components/Header.vue
Normal file
160
src/layouts/components/Header.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: '🏠',
|
||||
title: '首页',
|
||||
path: '/',
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: '数据统计',
|
||||
path: '/dashboard',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: '用户管理',
|
||||
path: '/users',
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
title: '文件管理',
|
||||
path: '/files',
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
title: '系统设置',
|
||||
path: '/settings',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<div class="logo">Admin</div>
|
||||
<div class="logo-text">管理后台</div>
|
||||
</div>
|
||||
|
||||
<nav class="header-nav">
|
||||
<a v-for="item in menuItems" :key="item.path" :href="item.path" class="nav-item"
|
||||
:class="{ active: $route.path === item.path }">
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span class="nav-text">{{ item.title }}</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="user-info">
|
||||
<div class="avatar">👤</div>
|
||||
<span class="username">管理员</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.user-info:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
110
src/layouts/components/LayoutSwitcher.vue
Normal file
110
src/layouts/components/LayoutSwitcher.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const layouts = [
|
||||
{ id: 'sidebar', name: '侧边栏模式', icon: '📱', description: '经典侧边栏布局' },
|
||||
{ id: 'top-nav', name: '顶部导航', icon: '📋', description: '顶部导航栏布局' },
|
||||
{ id: 'sidebar-top', name: '组合布局', icon: '🔄', description: '顶部导航+侧边栏' },
|
||||
{ id: 'classic', name: '经典布局', icon: '🖥️', description: '传统后台管理布局' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout-switcher">
|
||||
<h3>布局模式</h3>
|
||||
<div class="layout-grid">
|
||||
<div v-for="layout in layouts" :key="layout.id" class="layout-item"
|
||||
:class="{ active: layoutStore.layoutMode === layout.id }" @click="layoutStore.setLayoutMode(layout.id)">
|
||||
<div class="layout-icon">{{ layout.icon }}</div>
|
||||
<div class="layout-info">
|
||||
<div class="layout-name">{{ layout.name }}</div>
|
||||
<div class="layout-desc">{{ layout.description }}</div>
|
||||
</div>
|
||||
<div v-if="layoutStore.layoutMode === layout.id" class="active-badge">✓</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout-switcher {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.layout-switcher h3 {
|
||||
margin: 0 0 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.layout-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.layout-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-item:hover {
|
||||
border-color: #667eea;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.layout-item.active {
|
||||
border-color: #667eea;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
}
|
||||
|
||||
.layout-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.layout-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.layout-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.layout-desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.active-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
174
src/layouts/components/Sidebar.vue
Normal file
174
src/layouts/components/Sidebar.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
const props = defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: '🏠',
|
||||
title: '首页',
|
||||
path: '/',
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: '数据统计',
|
||||
path: '/dashboard',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: '用户管理',
|
||||
path: '/users',
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
title: '文件管理',
|
||||
path: '/files',
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
title: '系统设置',
|
||||
path: '/settings',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar" :class="{ collapsed }">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">Admin</div>
|
||||
<div v-if="!collapsed" class="logo-text">管理后台</div>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a v-for="item in menuItems" :key="item.path" :href="item.path" class="nav-item"
|
||||
:class="{ active: $route.path === item.path }">
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span v-if="!collapsed" class="nav-text">{{ item.title }}</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="toggle-btn" @click="layoutStore.toggleSidebar()">
|
||||
<span v-if="collapsed">➡️</span>
|
||||
<span v-else>⬅️</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.collapsed .sidebar-header {
|
||||
padding: 20px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 20px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
margin: 0 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.collapsed .nav-item {
|
||||
padding: 12px;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collapsed .nav-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
171
src/layouts/index.vue
Normal file
171
src/layouts/index.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
import Header from './components/Header.vue'
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
const layoutMode = computed(() => layoutStore.layoutMode)
|
||||
const sidebarCollapsed = computed(() => layoutStore.sidebarCollapsed)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout" :class="`layout-${layoutMode}`">
|
||||
<!-- 模式1: 侧边栏模式 (左侧侧边栏 + 右侧内容) -->
|
||||
<template v-if="layoutMode === 'sidebar'">
|
||||
<Sidebar :collapsed="sidebarCollapsed" />
|
||||
<main class="main-content" :class="{ collapsed: sidebarCollapsed }">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<!-- 模式2: 顶部导航模式 (顶部导航 + 下方内容) -->
|
||||
<template v-else-if="layoutMode === 'top-nav'">
|
||||
<Header />
|
||||
<main class="main-content top-nav-mode">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<!-- 模式3: 组合布局 (顶部导航 + 侧边栏 + 内容) -->
|
||||
<template v-else-if="layoutMode === 'sidebar-top'">
|
||||
<Header />
|
||||
<div class="sidebar-top-container">
|
||||
<Sidebar :collapsed="sidebarCollapsed" />
|
||||
<main class="main-content" :class="{ collapsed: sidebarCollapsed, 'sidebar-top': true }">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 模式4: 经典布局 (顶部header + 侧边栏 + 内容，类似传统后台) -->
|
||||
<template v-else-if="layoutMode === 'classic'">
|
||||
<div class="classic-header">
|
||||
<div class="classic-logo">Admin</div>
|
||||
<div class="classic-title">管理系统</div>
|
||||
</div>
|
||||
<div class="classic-container">
|
||||
<Sidebar :collapsed="sidebarCollapsed" />
|
||||
<main class="main-content" :class="{ collapsed: sidebarCollapsed, classic: true }">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 侧边栏模式 */
|
||||
.layout-sidebar .main-content {
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.layout-sidebar .main-content.collapsed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 顶部导航模式 */
|
||||
.layout-top-nav .main-content.top-nav-mode {
|
||||
flex: 1;
|
||||
margin-top: 60px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 组合布局 */
|
||||
.sidebar-top-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.layout-sidebar-top .main-content.sidebar-top {
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.layout-sidebar-top .main-content.sidebar-top.collapsed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 经典布局 */
|
||||
.classic-header {
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.classic-logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.classic-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.classic-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
.layout-classic .main-content.classic {
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
background: #f0f2f5;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.layout-classic .main-content.classic.collapsed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 通用主内容区域样式 */
|
||||
.main-content {
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 24px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.layout-sidebar .main-content,
|
||||
.layout-sidebar-top .main-content.sidebar-top,
|
||||
.layout-classic .main-content.classic {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,12 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import pinia from './stores'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
328
src/pages/home/Dashboard.vue
Normal file
328
src/pages/home/Dashboard.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<script setup>
|
||||
import LayoutSwitcher from '@/layouts/components/LayoutSwitcher.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<h1 class="page-title">欢迎回来，管理员！</h1>
|
||||
|
||||
<LayoutSwitcher />
|
||||
|
||||
<div class="dashboard-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">👥</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">用户总数</div>
|
||||
<div class="stat-value">1,234</div>
|
||||
<div class="stat-change positive">+12.5%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📊</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">数据统计</div>
|
||||
<div class="stat-value">5,678</div>
|
||||
<div class="stat-change positive">+8.3%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📁</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">文件数量</div>
|
||||
<div class="stat-value">892</div>
|
||||
<div class="stat-change negative">-2.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">⚙️</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">系统运行</div>
|
||||
<div class="stat-value">99.9%</div>
|
||||
<div class="stat-change positive">+0.5%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-content">
|
||||
<div class="content-card">
|
||||
<h2>最近活动</h2>
|
||||
<div class="activity-list">
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon">✓</div>
|
||||
<div class="activity-info">
|
||||
<div class="activity-title">新用户注册</div>
|
||||
<div class="activity-desc">用户 John Doe 完成了注册</div>
|
||||
<div class="activity-time">5分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon">📊</div>
|
||||
<div class="activity-info">
|
||||
<div class="activity-title">数据更新</div>
|
||||
<div class="activity-desc">月度报告已生成</div>
|
||||
<div class="activity-time">30分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon">⚠️</div>
|
||||
<div class="activity-info">
|
||||
<div class="activity-title">系统警告</div>
|
||||
<div class="activity-desc">服务器负载较高</div>
|
||||
<div class="activity-time">1小时前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon">📁</div>
|
||||
<div class="activity-info">
|
||||
<div class="activity-title">文件上传</div>
|
||||
<div class="activity-desc">项目文档已上传</div>
|
||||
<div class="activity-time">2小时前</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card">
|
||||
<h2>快速操作</h2>
|
||||
<div class="quick-actions">
|
||||
<button class="action-btn">
|
||||
<span class="action-icon">➕</span>
|
||||
<span>添加用户</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span class="action-icon">📤</span>
|
||||
<span>上传文件</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span class="action-icon">📝</span>
|
||||
<span>新建报告</span>
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span class="action-icon">⚙️</span>
|
||||
<span>系统设置</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.dashboard-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-change {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-change.positive {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.stat-change.negative {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.content-card h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.activity-item:hover {
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.activity-desc {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 20px 16px;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
border-color: #667eea;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.dashboard-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.dashboard-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
383
src/pages/login/index.vue
Normal file
383
src/pages/login/index.vue
Normal file
@@ -0,0 +1,383 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const loginForm = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const handleLogin = () => {
|
||||
loading.value = true
|
||||
|
||||
// 模拟登录请求
|
||||
setTimeout(() => {
|
||||
console.log('登录信息:', loginForm.value)
|
||||
loading.value = false
|
||||
// 这里可以添加实际的登录逻辑
|
||||
alert('登录成功！（模拟）')
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h2>用户登录</h2>
|
||||
<p>欢迎回来，请登录您的账户</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleLogin" class="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input id="username" v-model="loginForm.username" type="text" placeholder="请输入用户名" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input id="password" v-model="loginForm.password" type="password" placeholder="请输入密码" required />
|
||||
</div>
|
||||
|
||||
<div class="form-options">
|
||||
<label class="remember-me">
|
||||
<input type="checkbox" />
|
||||
<span>记住我</span>
|
||||
</label>
|
||||
<a href="#" class="forgot-password">忘记密码？</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn" :disabled="loading">
|
||||
<span v-if="!loading">登录</span>
|
||||
<span v-else>登录中...</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">
|
||||
<p>还没有账户？ <a href="#">立即注册</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0c1929 0%, #1a237e 50%, #0d47a1 100%);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 网格背景 */
|
||||
.login-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(50px, 50px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 科技光效 */
|
||||
.login-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.3),
|
||||
0 0 40px rgba(0, 212, 255, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
padding: 40px 40px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, transparent, #00d4ff, #7c4dff, transparent);
|
||||
border-radius: 2px;
|
||||
animation: lineGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes lineGlow {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.8), 0 0 30px rgba(124, 77, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #00d4ff 0%, #7c4dff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 20px 40px 40px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
border: 2px solid rgba(0, 212, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: white;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #00d4ff;
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 0 10px rgba(0, 212, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.form-group input:focus::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.remember-me:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.remember-me input[type='checkbox'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: #00d4ff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.remember-me input[type='checkbox']:checked {
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
font-size: 14px;
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.forgot-password:hover {
|
||||
color: #7c4dff;
|
||||
text-shadow: 0 0 10px rgba(124, 77, 255, 0.5);
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #00d4ff 0%, #7c4dff 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.login-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.login-btn:hover:not(:disabled)::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.login-btn:hover:not(:disabled) {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 10px 30px rgba(0, 212, 255, 0.4),
|
||||
0 0 20px rgba(124, 77, 255, 0.3);
|
||||
}
|
||||
|
||||
.login-btn:active:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.login-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
padding: 20px 40px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.login-footer p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.login-footer a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.login-footer a:hover {
|
||||
color: #7c4dff;
|
||||
text-shadow: 0 0 10px rgba(124, 77, 255, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.login-header,
|
||||
.login-form,
|
||||
.login-footer {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,57 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import Layout from '@/layouts/index.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/pages/login/index.vue'),
|
||||
meta: { requiresAuth: false },
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'Dashboard',
|
||||
component: Layout,
|
||||
redirect: '/home',
|
||||
meta: { requiresAuth: true },
|
||||
children: [
|
||||
{
|
||||
path: '/home',
|
||||
name: 'Home',
|
||||
component: () => import('@/pages/home/Dashboard.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [],
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: routes,
|
||||
})
|
||||
|
||||
// 路由拦截器 - 全局前置守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
const userStore = useUserStore()
|
||||
const isLoggedIn = userStore.isLoggedIn()
|
||||
|
||||
// 检查路由是否需要认证
|
||||
const requiresAuth = to.matched.some((record) => record.meta.requiresAuth !== false)
|
||||
|
||||
if (requiresAuth && !isLoggedIn) {
|
||||
// 需要认证但未登录，重定向到登录页
|
||||
next({
|
||||
path: '/login',
|
||||
query: { redirect: to.fullPath }, // 保存目标路径，登录后可以跳转回去
|
||||
})
|
||||
} else if (to.path === '/login' && isLoggedIn) {
|
||||
// 已登录但访问登录页，重定向到首页
|
||||
next({ path: '/' })
|
||||
} else {
|
||||
// 其他情况正常跳转
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
5
src/stores/index.js
Normal file
5
src/stores/index.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
const pinia = createPinia()
|
||||
|
||||
export default pinia
|
||||
27
src/stores/modules/layout.js
Normal file
27
src/stores/modules/layout.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useLayoutStore = defineStore('layout', () => {
|
||||
// 布局模式：'sidebar', 'top-nav', 'sidebar-top', 'classic'
|
||||
const layoutMode = ref('sidebar')
|
||||
|
||||
// 侧边栏折叠状态
|
||||
const sidebarCollapsed = ref(false)
|
||||
|
||||
// 切换侧边栏折叠
|
||||
const toggleSidebar = () => {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value
|
||||
}
|
||||
|
||||
// 设置布局模式
|
||||
const setLayoutMode = (mode) => {
|
||||
layoutMode.value = mode
|
||||
}
|
||||
|
||||
return {
|
||||
layoutMode,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
setLayoutMode,
|
||||
}
|
||||
})
|
||||
41
src/stores/modules/user.js
Normal file
41
src/stores/modules/user.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
const token = ref(localStorage.getItem('token') || '')
|
||||
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || 'null'))
|
||||
|
||||
// 设置 token
|
||||
function setToken(newToken) {
|
||||
token.value = newToken
|
||||
localStorage.setItem('token', newToken)
|
||||
}
|
||||
|
||||
// 设置用户信息
|
||||
function setUserInfo(info) {
|
||||
userInfo.value = info
|
||||
localStorage.setItem('userInfo', JSON.stringify(info))
|
||||
}
|
||||
|
||||
// 登出
|
||||
function logout() {
|
||||
token.value = ''
|
||||
userInfo.value = null
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('userInfo')
|
||||
}
|
||||
|
||||
// 检查是否已登录
|
||||
function isLoggedIn() {
|
||||
return !!token.value
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
userInfo,
|
||||
setToken,
|
||||
setUserInfo,
|
||||
logout,
|
||||
isLoggedIn,
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user