登录界面已完成
This commit is contained in:
389
src/App.vue
389
src/App.vue
@@ -1,389 +1,12 @@
|
||||
<template>
|
||||
<div class="full-screen-layout">
|
||||
<el-container class="full-screen-container">
|
||||
<!-- 侧边栏 -->
|
||||
<el-aside width="200px" class="siderbar">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo-container">
|
||||
<!-- 添加 logo 图片 -->
|
||||
<img src="@/assets/logo.jpg" alt="方舟网络" class="logo-image" />
|
||||
<div class="text-content">
|
||||
<h2 class="company-name">方舟网络</h2>
|
||||
<p class="system-name">工单管理系统</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 这里可以放菜单 -->
|
||||
<el-menu
|
||||
default-active="1"
|
||||
class="sidebar-menu"
|
||||
router
|
||||
>
|
||||
<el-menu-item index="1">
|
||||
<el-icon><icon-menu /></el-icon>
|
||||
<span>工单管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<el-icon><document /></el-icon>
|
||||
<span>数据统计</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<el-container class="main-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<el-header class="main-header">
|
||||
<div class="header-content">
|
||||
<div class="user-info">
|
||||
<el-avatar :size="32" :src="user.avatar" />
|
||||
<span class="username">{{ user.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<el-main class="main-content">
|
||||
<TicketManagement />
|
||||
<!-- <router-view /> -->
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.full-screen-layout {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.full-screen-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
<style>
|
||||
/* 全局样式，比如重置 margin/padding */
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.siderbar {
|
||||
background-color: #001529;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.system-name {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item:hover {
|
||||
background-color: rgba(24, 144, 255, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item.is-active {
|
||||
background-color: #1890ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
height: calc(100vh - 60px);
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
import TicketManagement from './views/TicketManagement.vue'
|
||||
|
||||
const user = reactive({
|
||||
name: '管理员',
|
||||
avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- <style scoped>
|
||||
|
||||
/* 关键：禁止水平滚动和溢出 */
|
||||
.full-screen-layout {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important; /* 禁止任何滚动 */
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
|
||||
|
||||
/* 关键：让 el-container 铺满 */
|
||||
.full-screen-container {
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 侧边栏样式 */
|
||||
.el-aside {
|
||||
background-color: #001529;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #001529;
|
||||
color: white;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-header {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #001529 0%, #002140 100%);
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.system-name {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-header p {
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item:hover {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
/* 主内容区域头部 */
|
||||
.main-header {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
height: calc(100vh - 60px); /* 减去头部高度 */
|
||||
overflow-y: auto; /* 允许内容滚动 */
|
||||
}
|
||||
</style> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <style scoped>
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
background: #409EFF;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background: #409EFF;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding: 20px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style> -->
|
||||
</style>
|
||||
@@ -1,9 +1,22 @@
|
||||
import axios from 'axios'
|
||||
import request from '@/utils/request'
|
||||
|
||||
|
||||
export const userApi = {
|
||||
// 登录接口
|
||||
login(username, password) {
|
||||
// 这里的 data 会被 axios 放在请求体 (Body) 中发送
|
||||
return request.post('/login', {
|
||||
username,
|
||||
password
|
||||
})
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
logout() {
|
||||
return request.post('/logout')
|
||||
}
|
||||
}
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: '/api', // 所有通过实例发送的请求都会加上前缀
|
||||
timeout: 10000 // 单位为ms
|
||||
})
|
||||
|
||||
export const ticketApi = {
|
||||
// 获取工单列表
|
||||
|
||||
236
src/layouts/MainLayout.vue
Normal file
236
src/layouts/MainLayout.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="full-screen-layout">
|
||||
<el-container class="full-screen-container">
|
||||
<!-- 侧边栏 -->
|
||||
<el-aside width="200px" class="siderbar">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo-container">
|
||||
<!-- 添加 logo 图片 -->
|
||||
<img src="@/assets/logo.jpg" alt="方舟网络" class="logo-image" />
|
||||
<div class="text-content">
|
||||
<h2 class="company-name">方舟网络</h2>
|
||||
<p class="system-name">工单管理系统</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 这里可以放菜单 -->
|
||||
<el-menu default-active="/" class="sidebar-menu" router>
|
||||
<el-menu-item index="/">
|
||||
<el-icon><icon-menu /></el-icon>
|
||||
<span>工单管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/stats">
|
||||
<el-icon>
|
||||
<document />
|
||||
</el-icon>
|
||||
<span>数据统计</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<el-container class="main-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<el-header class="main-header">
|
||||
<div class="header-content">
|
||||
<div class="user-info">
|
||||
<el-dropdown>
|
||||
<div class="user-profile">
|
||||
<el-avatar :size="32" :src="user.avatar" />
|
||||
<span class="username">{{ user.name }}</span>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<el-main class="main-content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.full-screen-layout {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.full-screen-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.siderbar {
|
||||
background-color: #001529;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.system-name {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item:hover {
|
||||
background-color: rgba(24, 144, 255, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item.is-active {
|
||||
background-color: #1890ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
height: calc(100vh - 60px);
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted } from 'vue'
|
||||
import { Menu as IconMenu, Document } from '@element-plus/icons-vue' // 补充图标引入
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const user = reactive({
|
||||
name: '加载中...',
|
||||
avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const savedUser = localStorage.getItem('user_info') || sessionStorage.getItem('user_info')
|
||||
if (savedUser) {
|
||||
const data = JSON.parse(savedUser)
|
||||
// 根据你 ThinkPHP 返回的字段来赋值，假设是 username
|
||||
user.name = data.username || '管理员'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.clear()
|
||||
sessionStorage.clear()
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
13
src/main.js
13
src/main.js
@@ -1,22 +1,17 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router' // 1. 导入我们创建的 router
|
||||
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(ElementPlus, {
|
||||
locale: zhCn,
|
||||
})
|
||||
|
||||
// 注册所有图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(ElementPlus)
|
||||
app.use(router) // 2. 在这里使用 router
|
||||
app.mount('#app')
|
||||
59
src/router/index.js
Normal file
59
src/router/index.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('../layouts/MainLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '', // 默认访问 / 显示工单管理
|
||||
name: 'home',
|
||||
component: () => import('../views/TicketManagement.vue'),
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: 'stats', // 访问 /stats
|
||||
name: 'stats',
|
||||
component: () => import('../views/StatsView.vue'),
|
||||
meta: { requiresAuth: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('../views/LoginView.vue') // 懒加载登录组件，
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
// 全局前置守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 1. 尝试从 localStorage 或 sessionStorage 获取 Token
|
||||
const token = localStorage.getItem('token') || sessionStorage.getItem('token');
|
||||
|
||||
// 2. 判断目标路由是否需要登录权限
|
||||
// matches 可以检查嵌套路由中父级或子级是否有 requiresAuth
|
||||
const isRequiresAuth = to.matched.some(record => record.meta.requiresAuth);
|
||||
|
||||
if (isRequiresAuth && !token) {
|
||||
// 3. 如果需要登录但没有 Token，强制拦截并跳转到登录页
|
||||
// 顺便把当前想去的页面路径传给登录页，方便登录后跳回来（可选增强逻辑）
|
||||
next({
|
||||
name: 'login',
|
||||
query: { redirect: to.fullPath }
|
||||
});
|
||||
} else if (to.name === 'login' && token) {
|
||||
|
||||
// 4. 如果用户已经登录了，还想手动输入 /login 去登录页，直接把他弹回首页
|
||||
next({ name: 'home' });
|
||||
} else {
|
||||
// 5. 否则直接放行
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
export default router
|
||||
45
src/utils/request.js
Normal file
45
src/utils/request.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import router from '@/router'
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// 自动获取 Token（兼顾两种存储方式）
|
||||
const token = localStorage.getItem('token') || sessionStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => Promise.reject(error)
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
response => response.data,
|
||||
error => {
|
||||
// 这里的 error.response.data 就是你发给我的那一长串报错 JSON
|
||||
if (error.response && error.response.status === 500) {
|
||||
const msg = error.response.data.message;
|
||||
if (msg === 'The token is expired.') {
|
||||
// 关键：发现过期，立刻清空！
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
|
||||
ElMessage.error('会话已过期，请重新登录');
|
||||
|
||||
// 此时再跳转，守卫检查没有 token，就能进 /login 了
|
||||
router.push('/login');
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
367
src/views/LoginView.vue
Normal file
367
src/views/LoginView.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="ark-wrapper">
|
||||
<div class="grid-bg"></div>
|
||||
<div class="scan-line"></div>
|
||||
|
||||
<div class="login-container">
|
||||
<transition name="ark-fade" appear>
|
||||
<div class="ark-card">
|
||||
<div class="corner-decorator top-left"></div>
|
||||
<div class="corner-decorator bottom-right"></div>
|
||||
|
||||
<div class="card-header">
|
||||
<div class="brand-icon">
|
||||
<el-icon>
|
||||
<DataBoard />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<h1 class="title">方舟工单</h1>
|
||||
<span class="sub-text">ARK TICKET SYSTEM v3.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="system-monitor">
|
||||
<span class="label">STATUS:</span>
|
||||
<span class="value online">ENCRYPTED CONNECTION</span>
|
||||
</div>
|
||||
|
||||
<el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="ark-form">
|
||||
<el-form-item prop="username">
|
||||
<div class="input-prefix">ID</div>
|
||||
<el-input v-model="loginForm.username" placeholder="工员编号" class="ark-input" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<div class="input-prefix">KEY</div>
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="访问密钥" show-password
|
||||
class="ark-input" />
|
||||
</el-form-item>
|
||||
|
||||
<div class="options-bar">
|
||||
<el-checkbox v-model="rememberMe">保持认证状态</el-checkbox>
|
||||
</div>
|
||||
|
||||
<!--loading为true时候,会转圈圈-->
|
||||
<el-button type="primary" class="ark-btn" @click="handleLogin" :loading="loading">
|
||||
|
||||
<div class="btn-content">
|
||||
<span class="main-btn-text">INITIALIZE / 启动</span>
|
||||
</div>
|
||||
</el-button>
|
||||
</el-form>
|
||||
|
||||
<div class="card-footer">
|
||||
<span class="code">SECURE PROTOCOL 801-ARK</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { DataBoard } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { userApi } from '@/api/ticket';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const loginForm = reactive({ username: '', password: '' });
|
||||
const rememberMe = ref(false);
|
||||
const loading = ref(false);
|
||||
const loginFormRef = ref(null);
|
||||
|
||||
const loginRules = reactive({
|
||||
username: [{ required: true, message: '请输入工员编号', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密钥', trigger: 'blur' }]
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!loginFormRef.value) return;
|
||||
try {
|
||||
await loginFormRef.value.validate();
|
||||
loading.value = true;
|
||||
|
||||
const res = await userApi.login(loginForm.username, loginForm.password);
|
||||
|
||||
// 注意：这里由于你之前的封装，可能需要判断 res.data.code 还是 res.code
|
||||
// 如果用了拦截器，直接判断 res.code
|
||||
if (res.code === 200) {
|
||||
const token = res.data.token;
|
||||
const userInfo = JSON.stringify(res.data.user_info);
|
||||
|
||||
// --- 核心逻辑开始 ---
|
||||
if (rememberMe.value) {
|
||||
// 勾选了：存入 localStorage，实现持久化
|
||||
localStorage.setItem('token', token);
|
||||
localStorage.setItem('user_info', userInfo);
|
||||
} else {
|
||||
// 没勾选：存入 sessionStorage，关闭标签页即失效
|
||||
sessionStorage.setItem('token', token);
|
||||
sessionStorage.setItem('user_info', userInfo);
|
||||
}
|
||||
// --- 核心逻辑结束 ---
|
||||
|
||||
ElMessage.success('身份验证通过，方舟系统加载中...');
|
||||
|
||||
setTimeout(() => {
|
||||
router.push('/');
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(res.message || '登录失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login Error:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 1. 全局背景：工业网格风格 */
|
||||
.ark-wrapper {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #0b111a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
mask-image: radial-gradient(circle at center, black, transparent 80%);
|
||||
}
|
||||
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.2), transparent);
|
||||
top: 0;
|
||||
animation: scan 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% {
|
||||
top: -10%;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 2. 方舟卡片 */
|
||||
.ark-card {
|
||||
position: relative;
|
||||
width: 420px;
|
||||
background: rgba(13, 22, 34, 0.85);
|
||||
border: 1px solid rgba(0, 242, 255, 0.3);
|
||||
padding: 40px;
|
||||
box-shadow: 0 0 40px rgba(0, 242, 255, 0.1), inset 0 0 20px rgba(0, 242, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 装饰性角标 */
|
||||
.corner-decorator {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-color: #00f2ff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
border-width: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
border-width: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
background: rgba(0, 242, 255, 0.1);
|
||||
padding: 10px;
|
||||
border: 1px solid #00f2ff;
|
||||
display: flex;
|
||||
color: #00f2ff;
|
||||
clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
color: #00f2ff;
|
||||
font-size: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 3. 监控条 */
|
||||
.system-monitor {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
padding: 5px 12px;
|
||||
margin-bottom: 25px;
|
||||
border-left: 3px solid #00f2ff;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.system-monitor .label {
|
||||
color: #64748b;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.system-monitor .value {
|
||||
color: #22c55e;
|
||||
text-shadow: 0 0 5px #22c55e;
|
||||
}
|
||||
|
||||
/* 4. 输入框定制 */
|
||||
.input-prefix {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
font-size: 10px;
|
||||
color: #00f2ff;
|
||||
font-weight: bold;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
:deep(.ark-input .el-input__wrapper) {
|
||||
background: rgba(0, 242, 255, 0.03) !important;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(0, 242, 255, 0.2);
|
||||
border-radius: 0;
|
||||
/* 工业风通常使用直角 */
|
||||
height: 50px;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
:deep(.ark-input .is-focus) {
|
||||
border-color: #00f2ff !important;
|
||||
background: rgba(0, 242, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
/* 5. 启动按钮 */
|
||||
.ark-btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: transparent !important;
|
||||
border: 1px solid #00f2ff !important;
|
||||
color: #00f2ff !important;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ark-btn:hover {
|
||||
background: #00f2ff !important;
|
||||
color: #000 !important;
|
||||
box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
|
||||
}
|
||||
|
||||
.options-bar {
|
||||
margin: 15px 0 25px;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
background: transparent;
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: 30px;
|
||||
text-align: right;
|
||||
border-top: 1px dashed rgba(0, 242, 255, 0.1);
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* 入场动画 */
|
||||
.ark-fade-enter-active {
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
.ark-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
filter: brightness(2);
|
||||
}
|
||||
|
||||
|
||||
/* 1. 核心修复：禁止卡片内非交互元素的文本选中 */
|
||||
.ark-card,
|
||||
.card-header,
|
||||
.brand-text,
|
||||
.title,
|
||||
.sub-text,
|
||||
.system-monitor,
|
||||
.options-bar,
|
||||
.card-footer,
|
||||
.code,
|
||||
.input-prefix {
|
||||
user-select: none;
|
||||
/* 禁止选中文字 */
|
||||
-webkit-user-select: none;
|
||||
/* 兼容 Safari */
|
||||
-moz-user-select: none;
|
||||
/* 兼容 Firefox */
|
||||
-ms-user-select: none;
|
||||
/* 兼容 IE */
|
||||
cursor: default;
|
||||
/* 强制鼠标指针为标准箭头，不变成 I 型 */
|
||||
}
|
||||
|
||||
/* 2. 确保输入框内部依然可以正常输入和选中（不受父级影响） */
|
||||
:deep(.el-input__inner) {
|
||||
user-select: text !important;
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
/* 3. 确保复选框的 Label 也不会被选中（防止点击勾选时变蓝） */
|
||||
:deep(.el-checkbox) {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
12
src/views/StatsView.vue
Normal file
12
src/views/StatsView.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="stats-view">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<h2>数据统计</h2>
|
||||
</template>
|
||||
<p>数据统计页面正在建设中...</p>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
@@ -101,10 +101,9 @@ const initGlobalStats = async () => {
|
||||
// 请求第一页，且不带任何筛选条件（filters）
|
||||
// 目的只是为了拿到全量数据来统计卡片
|
||||
const response = await ticketApi.getTickets({ page: 1, limit: 1000 })
|
||||
const resData = response.data
|
||||
if (resData.code) {
|
||||
const allData = resData.data.data
|
||||
allStats.total = resData.data.total
|
||||
if (response.code) {
|
||||
const allData = response.data.data
|
||||
allStats.total = response.data.total
|
||||
allStats.pending = allData.filter(t => t.is_complete === '未分配').length
|
||||
allStats.ongoing = allData.filter(t => t.is_complete === '进行中').length
|
||||
allStats.completed = allData.filter(t => t.is_complete === '已完成' || t.is_complete === '已完结').length
|
||||
@@ -126,10 +125,10 @@ const loadTickets = async () => {
|
||||
...filters
|
||||
}
|
||||
const response = await ticketApi.getTickets(params)
|
||||
const resData = response.data
|
||||
if (resData.code) {
|
||||
tickets.value = resData.data.data
|
||||
pagination.total = resData.data.total
|
||||
console.log('工单列表响应:', response)
|
||||
if (response.code) {
|
||||
tickets.value = response.data.data
|
||||
pagination.total = response.total
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('加载列表失败')
|
||||
|
||||
Reference in New Issue
Block a user