duxingchen/GLXT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

创建项目，前端模拟

Browse Source
This commit is contained in:
YueL1331
2026-01-12 11:42:00 +08:00
commit 03ffb8ddbc
24 changed files with 3153 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Vue/frontend/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
Vue/frontend/.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

13
Vue/frontend/index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2639
Vue/frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
Vue/frontend/package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.13.2",
"pinia": "^3.0.4",
"vue": "^3.5.24",
"vue-router": "^4.6.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"vite": "^7.2.4"
}
}

1
Vue/frontend/public/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
Vue/frontend/src/App.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<router-view></router-view>
</template>

0
Vue/frontend/src/api/auth.js Normal file
View File

0
Vue/frontend/src/api/project.js Normal file
View File

19
Vue/frontend/src/api/request.js Normal file
View File

@ -0,0 +1,19 @@
import axios from 'axios'
const service = axios.create({
baseURL: 'http://localhost:5000/api', // 指向 Flask 后端地址
timeout: 5000
})
// 请求拦截器：每次请求自动把 Token 塞进 Header
service.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})
export default service

1
Vue/frontend/src/assets/vue.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

11
Vue/frontend/src/components/ProgressBar.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>

43
Vue/frontend/src/components/StatusBadge.vue Normal file
View File

@ -0,0 +1,43 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

45
Vue/frontend/src/layouts/MainLayout.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div class="layout-container">
<aside class="sidebar">
<h3>设备管理系统</h3>
<nav>
<router-link to="/dashboard">📊 项目看板</router-link>
<router-link to="/project/add">➕ 新建项目</router-link>
<router-link v-if="userStore.role === 'admin'" to="/admin/users">👥 人员权限</router-link>
</nav>
</aside>
<div class="main-content">
<header class="top-bar">
<span>当前用户: {{ userStore.username }}</span>
<button @click="handleLogout">退出</button>
</header>
<div class="page-view">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script setup>
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
const handleLogout = () => {
userStore.logout()
router.push('/login')
}
</script>
<style scoped>
.layout-container { display: flex; height: 100vh; }
.sidebar { width: 200px; background: #2c3e50; color: white; padding: 20px; }
.sidebar a { display: block; color: white; margin: 10px 0; text-decoration: none; }
.main-content { flex: 1; display: flex; flex-direction: column; }
.top-bar { padding: 10px 20px; background: #eee; display: flex; justify-content: space-between; }
.page-view { padding: 20px; overflow: auto; }
</style>

11
Vue/frontend/src/main.js Normal file
View File

@ -0,0 +1,11 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './style.css' // 如果您有全局样式的话
const app = createApp(App)
app.use(createPinia()) // 启用状态管理
app.use(router) // 启用路由
app.mount('#app')

43
Vue/frontend/src/router/index.js Normal file
View File

@ -0,0 +1,43 @@
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import MainLayout from '../layouts/MainLayout.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/login', component: Login },
{
path: '/',
component: MainLayout,
redirect: '/dashboard',
children: [
{ path: 'dashboard', component: () => import('../views/Dashboard.vue') },
// 研发/维修添加页 (共用一个组件)
{ path: 'project/add', component: () => import('../views/ProjectForm.vue') },
// 管理员页面
{
path: 'admin/users',
component: () => import('../views/Admin/UserManage.vue'),
meta: { requiresAdmin: true }
}
]
}
]
})
// 路由守卫
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
const role = localStorage.getItem('role')
if (to.path !== '/login' && !token) {
next('/login')
} else if (to.meta.requiresAdmin && role !== 'admin') {
alert('权限不足')
next('/dashboard')
} else {
next()
}
})
export default router

31
Vue/frontend/src/stores/user.js Normal file
View File

@ -0,0 +1,31 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useUserStore = defineStore('user', () => {
// 状态：从 localStorage 读取，防止刷新丢失
const token = ref(localStorage.getItem('token') || '')
const username = ref(localStorage.getItem('username') || '')
const role = ref(localStorage.getItem('role') || 'user')
// 动作：登录
function login(userData) {
token.value = userData.token
username.value = userData.username
role.value = userData.role
// 存入本地
localStorage.setItem('token', userData.token)
localStorage.setItem('username', userData.username)
localStorage.setItem('role', userData.role)
}
// 动作：登出
function logout() {
token.value = ''
username.value = ''
role.value = ''
localStorage.clear()
}
return { token, username, role, login, logout }
})

73
Vue/frontend/src/style.css Normal file
View File

@ -0,0 +1,73 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
/* 保留原有的配色方案 */
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 链接样式 */
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
/* 核心修改：清除默认的居中和边距，强制铺满屏幕 */
html, body, #app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: block; /* 覆盖掉原有的 display: flex */
}
/* 全局盒子模型设置 */
*, *::before, *::after {
box-sizing: border-box;
}
/* 按钮样式保持不变 */
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
/* 浅色模式适配 */
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

9
Vue/frontend/src/views/Admin/UserManage.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div>
<h2 style="color: red;">管理员控制台：人员权限管理</h2>
<ul>
<li>张三 (工程师) - <button>删除</button></li>
<li>李四 (维修员) - <button>删除</button></li>
</ul>
</div>
</template>

43
Vue/frontend/src/views/Dashboard.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div>
<h2>项目进度看板</h2>
<table border="1" cellspacing="0" cellpadding="10" style="width: 100%">
<thead>
<tr>
<th>项目名称</th>
<th>状态</th>
<th>成立日期</th>
<th>负责人</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in projects" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.status }}</td>
<td>{{ item.created_at }}</td>
<td>{{ item.owner }}</td>
<td><button>查看详情</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from '../api/request'
const projects = ref([])
onMounted(async () => {
// 真实请求： const res = await axios.get('/projects')
// projects.value = res.data
// 模拟数据
projects.value = [
{ id: 1, name: '高精度传感器研发', status: '研发中', created_at: '2023-10-01', owner: 'zhangsan' },
{ id: 2, name: '机械臂维修A01', status: '待维修', created_at: '2023-10-05', owner: 'lisi' }
]
})
</script>

47
Vue/frontend/src/views/Login.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div class="login-box">
<h2>系统登录</h2>
<input v-model="form.username" placeholder="用户名" />
<input v-model="form.password" type="password" placeholder="密码" />
<button @click="handleLogin">登录</button>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import axios from '../api/request' // 导入我们封装的 request
const router = useRouter()
const userStore = useUserStore()
const form = reactive({ username: '', password: '' })
const handleLogin = async () => {
try {
// 这里暂时模拟后端返回，等您Flask写好了把下面注释解开
/*
const res = await axios.post('/login', form)
userStore.login(res.data) // res.data 包含 token, username, role
*/
// --- 模拟数据开始 ---
if(form.username) {
userStore.login({
token: 'fake-jwt-token-123',
username: form.username,
role: form.username === 'admin' ? 'admin' : 'engineer'
})
router.push('/dashboard')
}
// --- 模拟数据结束 ---
} catch (error) {
alert('登录失败')
}
}
</script>
<style scoped>
.login-box { width: 300px; margin: 100px auto; display: flex; flex-direction: column; gap: 10px; }
</style>

11
Vue/frontend/src/views/NotFound.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>

55
Vue/frontend/src/views/ProjectForm.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div class="form-container">
<h2>新建研发/维修项目</h2>
<label>项目名称</label>
<input v-model="form.name" />
<label>项目类型</label>
<select v-model="form.type">
<option>新设备研发</option>
<option>旧设备维修</option>
</select>
<label>详细描述</label>
<textarea v-model="form.description"></textarea>
<label>负责人 (自动填入)</label>
<input :value="userStore.username" disabled style="background: #eee;" />
<label>创建日期 (自动填入)</label>
<input :value="currentDate" disabled style="background: #eee;" />
<button @click="submit">提交</button>
</div>
</template>
<script setup>
import { reactive, computed } from 'vue'
import { useUserStore } from '../stores/user'
import axios from '../api/request'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
const currentDate = new Date().toISOString().split('T')[0] // 获取今天日期
const form = reactive({
name: '',
type: '新设备研发',
description: ''
})
const submit = async () => {
// 发送给后端
// 注意：不要把 userStore.username 传给后端，后端应该自己从 token 里取，这样更安全
// await axios.post('/projects', form)
alert('提交成功！')
router.push('/dashboard')
}
</script>
<style scoped>
.form-container { display: flex; flex-direction: column; gap: 10px; max-width: 500px; }
</style>

7
Vue/frontend/vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
})