Skip to content

Commit ffd7318

Browse files
LisianthusLeafLisianthusLeaf
authored
Merge pull request #6 from Time-Machine-Lab/ximena
调整导航路由，增加工作台
2 parents 522a416 + 42b0543 commit ffd7318

File tree

7 files changed

+162
-62
lines changed

7 files changed

+162
-62
lines changed

‎src/api/market/api.ts‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,33 @@ import request from '@/util/request';
22

33
// 查询项目信息
44
export async function searchProject(page: number=1, limit: number=10,cmd: number=2,name?: string):Promise<any>{
5-
try {
6-
const response = await request({
7-
url: '/project/search',
8-
method: "post",
9-
params: {
10-
page:page,
11-
limit:limit,
12-
cmd: cmd, //查询类型:1、按时间排序 2、按下载量排序 3、搜索名称
13-
name: name
14-
}
15-
})
16-
return response;
17-
} catch (error) {
18-
console.error('查询项目请求失败：', error);
5+
// try {
6+
// const response = await request({
7+
// url: '/project/search',
8+
// method: "post",
9+
// params: {
10+
// page:page,
11+
// limit:limit,
12+
// cmd: cmd, //查询类型:1、按时间排序 2、按下载量排序 3、搜索名称
13+
// name: name
14+
// }
15+
// })
16+
// return response.data;
17+
// } catch (error) {
18+
// console.error('查询项目请求失败：', error);
19+
//
20+
// }
21+
const mock = {
22+
id: "1863808850090049538",
23+
name: "小春的项目",
24+
codeLanguage: "java",
25+
cover: "嘻嘻",
26+
description: "嘻嘻",
27+
introduce: "嘻嘻",
28+
nickname: "otow管理员",
29+
price: 78
1930
}
31+
return mock;
2032
}
2133

2234
export async function downloadProject(id:number):Promise<any>{

‎src/api/workbench/type.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,16 @@ export interface detail {
1111
cover: string
1212
url: string
1313
}
14+
// 项目信息类
15+
export interface WorkProject {
16+
id: string
17+
name: string
18+
codeLanguage: string
19+
cover: string
20+
description: string
21+
introduce: string
22+
nickname: string
23+
downloadNums: string
24+
viewNums: string
25+
price: number
26+
}

‎src/assets/main.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,6 @@ input{
2727
button{
2828
padding: 10px 20px;
2929
border-radius: 10px;
30-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.04);
31-
}
32-
@media (min-width: 1024px) {
33-
body {
34-
display: flex;
35-
place-items: center;
36-
}
37-
38-
#app {
39-
display: grid;
40-
grid-template-columns: 1fr 1fr;
41-
padding: 0;
42-
}
4330
}
4431

4532
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */

‎src/components/normal/Text.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<style scoped>
88
.text {
9-
color: #333;
9+
mix-blend-mode: normal;
1010
font-size: 16px;
1111
padding:10px 30px;
1212
margin:auto;

‎src/router/index.ts‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import HomeView from '../views/home/index.vue'
33
import LoginView from '../views/login/index.vue'
44
import MarketView from '../views/market/index.vue'
55
import PersonalView from '../views/personal/index.vue'
6+
import WorkbenchView from '../views/workbench/workbench.vue'
67

78
const router = createRouter({
89
history: createWebHistory(import.meta.env.BASE_URL),
@@ -11,22 +12,34 @@ const router = createRouter({
1112
path: '/',
1213
name: 'home',
1314
component: HomeView,
15+
children: [
16+
{
17+
path: '',
18+
name: 'first',
19+
component: MarketView,
20+
},
21+
{
22+
path: 'market',
23+
name: 'market',
24+
component: MarketView,
25+
},
26+
{
27+
path: 'personal',
28+
name: 'personal',
29+
component: PersonalView,
30+
},
31+
{
32+
path: 'workbench',
33+
name: 'workbench',
34+
component: WorkbenchView,
35+
},
36+
]
1437
},
1538
{
1639
path: '/login',
1740
name: 'login',
1841
component: LoginView,
19-
},
20-
{
21-
path: '/market',
22-
name: 'market',
23-
component: MarketView,
24-
},
25-
{
26-
path: '/personal',
27-
name: 'personal',
28-
component: PersonalView,
29-
},
42+
}
3043
],
3144
})
3245

‎src/views/home/index.vue‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<script lang="ts" setup>
22
import {ref} from "vue";
33
import MarketView from '@/views/market/index.vue'
4+
import WorkbenchView from '@/views/workbench/workbench.vue'
45
import Text from "@/components/normal/Text.vue";
56
import router from "@/router";
67
import Snackbar from "@/components/normal/Snackbar.vue";
78
89
// 导航栏
910
const currentIndex = ref(0)
1011
const tabs = [
11-
{ name: 'market', component: MarketView },
12-
{ name: 'home', component: MarketView },
12+
{ name: 'market', local: '/market' },
13+
{ name: 'home', local: '/market' },
1314
]
15+
// 通过tab切换内容展示
1416
const selectTab = (index: any) =>{
1517
currentIndex.value = index;
1618
}
@@ -33,23 +35,22 @@ const authStore = useAuthStore();
3335
:key="index"
3436
class="tab-button"
3537
:class="{ active: currentIndex === index }"
36-
@click="selectTab(index)"
38+
@click="router.push(tabs[index].local)"
3739
>
3840
<Text>{{ tab.name }}</Text>
3941
</div>
42+
<div class="search">
43+
<input placeholder="Search"/>
44+
</div>
4045
</nav>
4146
<nav class="side flex">
4247
<button v-if="!authStore.isLoggedIn" @click="router.push('/login')">login</button>
4348
<button v-else @click="router.push('/personal')">头像</button>
49+
<button class="workBtn" @click="router.push('/workbench')">我的工作台</button>
4450
</nav>
4551
</header>
4652
<div class="tabs-content">
47-
<component
48-
v-for="(tab, index) in tabs"
49-
:key="index"
50-
:is="tab.component"
51-
:v-if="currentIndex === index"
52-
/>
53+
<RouterView></RouterView>
5354
</div>
5455
</div>
5556
</template>
@@ -68,18 +69,29 @@ const authStore = useAuthStore();
6869
display: flex;
6970
background-color: #FFFBDD;
7071
height:70px;
71-
}
72-
.side{
73-
flex:1;
74-
}
75-
.tab-button {
76-
cursor: pointer;
77-
user-select: none;
78-
transition: background-color 0.3s;
79-
}
72+
.side{
73+
flex:1;
74+
}
75+
.tab-button {
76+
cursor: pointer;
77+
user-select: none;
78+
transition: background-color 0.3s;
79+
}
8080
81-
.tab-button.active {
82-
background-color: #f4efd3;
83-
border-bottom: 2px solid #f4efd3;
81+
.tab-button.active {
82+
background-color: #f4efd3;
83+
border-bottom: 2px solid #f4efd3;
84+
}
85+
.search{
86+
background-color: rgba(0, 0, 0, 0.07);
87+
padding: 10px 30px;
88+
border-radius: 10px;
89+
margin-left:20px;
90+
}
91+
.workBtn{
92+
margin-left:20px;
93+
border: 1px solid #3a3a3a;
94+
}
8495
}
96+
8597
</style>

‎src/views/workbench/workbench.vue‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,74 @@
11
<script setup lang="ts">
2+
import Text from "@/components/normal/Text.vue";
3+
import {onMounted, ref} from "vue";
4+
import {searchProject} from "@/api/market/api.ts";
5+
import type {WorkProject} from "@/api/workbench/type.ts";
26
7+
let WorkList = ref<WorkProject[]>([])
8+
const getWorkList = async () => {
9+
WorkList.value = await searchProject()
10+
console.log(WorkList.value)
11+
}
12+
onMounted(() => {
13+
getWorkList()
14+
})
315
</script>
416

517
<template>
6-
18+
<div class="workbench">
19+
<div>
20+
<Text>我的工作台</Text>
21+
</div>
22+
<div class="projectList">
23+
<div class="projectCard">
24+
<button>
25+
<Text>+ Creat new project</Text>
26+
</button>
27+
</div>
28+
<div
29+
v-for="(item,index) in WorkList"
30+
:key="index"
31+
class="projectCard"
32+
>
33+
<Text>{{item.name}}</Text>
34+
</div>
35+
</div>
36+
</div>
737
</template>
838

939
<style scoped>
10-
40+
.workbench{
41+
width:90%;
42+
margin:auto;
43+
background-color: rgba(255, 255, 255, 0.63);
44+
}
45+
.projectList{
46+
display: grid;
47+
grid-template-columns: 1fr 1fr 1fr;
48+
}
49+
.projectCard{
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
min-height: 200px;
54+
border: solid 1px #e0e0e0;
55+
border-radius: 10px;
56+
margin:20px;
57+
}
58+
button{
59+
background-color: #000000;
60+
color: white;
61+
}
62+
@media (max-width: 1024px) {
63+
.projectList{
64+
display: grid;
65+
grid-template-columns: 1fr 1fr;
66+
}
67+
}
68+
@media (max-width: 700px) {
69+
.projectList{
70+
display: grid;
71+
grid-template-columns: 1fr;
72+
}
73+
}
1174
</style>

0 commit comments

Comments
 (0)