126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div class="project-container">
|
||
|
|
<h1 class="title">选择要跳转项目</h1>
|
||
|
|
<div class="project-list">
|
||
|
|
<el-card
|
||
|
|
v-for="project in projects"
|
||
|
|
:key="project.id"
|
||
|
|
class="project-card"
|
||
|
|
@click="handleSelect(project)"
|
||
|
|
>
|
||
|
|
<div class="card-content">
|
||
|
|
<el-avatar :size="60" :src="project.avatar" />
|
||
|
|
<div class="project-info">
|
||
|
|
<h3>{{ project.name }}</h3>
|
||
|
|
<p class="description">{{ project.description }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import {getUserTokenCode} from '@/api/user'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
|
||
|
|
interface Project {
|
||
|
|
id: string
|
||
|
|
name: string
|
||
|
|
description: string
|
||
|
|
avatar: string
|
||
|
|
path: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
// 模拟项目数据
|
||
|
|
const projects = ref<Project[]>([
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
name: 'vp系统',
|
||
|
|
description: '视频及系统管理工具',
|
||
|
|
avatar: 'https://www.ljsea.top/wp-content/uploads/2025/06/ljsea.jpg',
|
||
|
|
path: 'https://gs.ljsea.top/callback' //path: 'https://gs.ljsea.top/callback' 'http://localhost:5173/#/callback'
|
||
|
|
},
|
||
|
|
])
|
||
|
|
|
||
|
|
const GetTokenCode =async () => {
|
||
|
|
let req ={
|
||
|
|
token: localStorage.getItem('token') || ''
|
||
|
|
}
|
||
|
|
await getUserTokenCode(req).then((res: any) => {
|
||
|
|
if (res.code === 0) {
|
||
|
|
if (res.data.code === '') {
|
||
|
|
ElMessage.error('获取失败');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
alert('获取成功:'+res.data.code);
|
||
|
|
localStorage.setItem('tokenCode', res.data.code);
|
||
|
|
} else {
|
||
|
|
console.error('获取Token失败:', res.message);
|
||
|
|
}
|
||
|
|
}).catch((error: any) => {
|
||
|
|
console.error('请求错误:', error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSelect = async (project: Project) => {
|
||
|
|
await GetTokenCode();
|
||
|
|
let url = project.path + '?code=' + localStorage.getItem('tokenCode');
|
||
|
|
window.open(url);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.project-container {
|
||
|
|
padding: 20px;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-list {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-card {
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-info {
|
||
|
|
margin-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-info h3 {
|
||
|
|
margin: 0 0 8px 0;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.description {
|
||
|
|
margin: 0;
|
||
|
|
color: #666;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
</style>
|