调整导航路由，增加工作台

src/api/market/api.ts

@@ -2,21 +2,33 @@ import request from '@/util/request';
 
 // 查询项目信息
 export async function searchProject(page: number=1, limit: number=10,cmd: number=2,name?: string):Promise<any>{
-    try {
-        const response = await request({
-            url: '/project/search',
-            method: "post",
-            params: {
-                page:page,
-                limit:limit,
-                cmd: cmd, //查询类型:1、按时间排序 2、按下载量排序 3、搜索名称
-                name: name
-            }
-        })
-        return response;
-    } catch (error) {
-        console.error('查询项目请求失败：', error);
+    // try {
+    //     const response = await request({
+    //         url: '/project/search',
+    //         method: "post",
+    //         params: {
+    //             page:page,
+    //             limit:limit,
+    //             cmd: cmd, //查询类型:1、按时间排序 2、按下载量排序 3、搜索名称
+    //             name: name
+    //         }
+    //     })
+    //     return response.data;
+    // } catch (error) {
+    //     console.error('查询项目请求失败：', error);
+    //
+    // }
+    const mock =  {
+        id: "1863808850090049538",
+        name: "小春的项目",
+        codeLanguage: "java",
+        cover: "嘻嘻",
+        description: "嘻嘻",
+        introduce: "嘻嘻",
+        nickname: "otow管理员",
+        price: 78
     }
+    return mock;
 }
 
 export async function downloadProject(id:number):Promise<any>{

src/api/workbench/type.ts

@@ -11,3 +11,16 @@ export interface detail {
     cover: string
     url: string
 }
+// 项目信息类
+export interface WorkProject {
+    id: string
+    name: string
+    codeLanguage: string
+    cover: string
+    description: string
+    introduce: string
+    nickname: string
+    downloadNums: string
+    viewNums: string
+    price: number
+}

src/assets/main.css

@@ -27,19 +27,6 @@ input{
 button{
   padding: 10px 20px;
   border-radius: 10px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.04);
-}
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0;
-  }
 }
 
 /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */

src/components/normal/Text.vue

@@ -6,7 +6,7 @@
 
 <style scoped>
 .text {
-  color: #333;
+  mix-blend-mode: normal;
   font-size: 16px;
   padding:10px 30px;
   margin:auto;

src/router/index.ts

@@ -3,6 +3,7 @@ import HomeView from '../views/home/index.vue'
 import LoginView from '../views/login/index.vue'
 import MarketView from '../views/market/index.vue'
 import PersonalView from '../views/personal/index.vue'
+import WorkbenchView from '../views/workbench/workbench.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -11,22 +12,29 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView,
+      children: [
+        {
+          path: '',
+          name: 'market',
+          component: MarketView,
+        },
+        {
+          path: 'personal',
+          name: 'personal',
+          component: PersonalView,
+        },
+        {
+          path: 'workbench',
+          name: 'workbench',
+          component: WorkbenchView,
+        },
+      ]
     },
     {
       path: '/login',
       name: 'login',
       component: LoginView,
-    },
-    {
-      path: '/market',
-      name: 'market',
-      component: MarketView,
-    },
-    {
-      path: '/personal',
-      name: 'personal',
-      component: PersonalView,
-    },
+    }
   ],
 })
 

src/views/home/index.vue

@@ -1,16 +1,19 @@
 <script lang="ts" setup>
 import {ref} from "vue";
 import MarketView from '@/views/market/index.vue'
+import WorkbenchView from '@/views/workbench/workbench.vue'
 import Text from "@/components/normal/Text.vue";
 import router from "@/router";
 import Snackbar from "@/components/normal/Snackbar.vue";
 
 // 导航栏
 const currentIndex = ref(0)
 const tabs = [
-  { name: 'market', component: MarketView },
-  { name: 'home', component: MarketView },
+  { name: 'market', local: '/market' },
+  { name: 'home', component: '/market' },
 ]
+const component = ref(tabs[0].component)
+// 通过tab切换内容展示
 const selectTab = (index: any) =>{
   currentIndex.value = index;
 }
@@ -37,19 +40,18 @@ const authStore = useAuthStore();
         >
           <Text>{{ tab.name }}</Text>
         </div>
+        <div class="search">
+          <input placeholder="Search"/>
+        </div>
       </nav>
       <nav class="side flex">
         <button v-if="!authStore.isLoggedIn" @click="router.push('/login')">login</button>
         <button v-else @click="router.push('/personal')">头像</button>
+        <button class="workBtn" @click="router.push('/workbench')">我的工作台</button>
       </nav>
     </header>
     <div class="tabs-content">
-      <component
-          v-for="(tab, index) in tabs"
-          :key="index"
-          :is="tab.component"
-          :v-if="currentIndex === index"
-      />
+      <RouterView></RouterView>
     </div>
   </div>
 </template>
@@ -68,18 +70,29 @@ const authStore = useAuthStore();
   display: flex;
   background-color: #FFFBDD;
   height:70px;
-}
-.side{
-  flex:1;
-}
-.tab-button {
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.3s;
-}
+  .side{
+    flex:1;
+  }
+  .tab-button {
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.3s;
+  }
 
-.tab-button.active {
-  background-color: #f4efd3;
-  border-bottom: 2px solid #f4efd3;
+  .tab-button.active {
+    background-color: #f4efd3;
+    border-bottom: 2px solid #f4efd3;
+  }
+  .search{
+    background-color: rgba(0, 0, 0, 0.07);
+    padding: 10px 30px;
+    border-radius: 10px;
+    margin-left:20px;
+  }
+  .workBtn{
+    margin-left:20px;
+    border: 1px solid #3a3a3a;
+  }
 }
+
 </style>

src/views/workbench/workbench.vue

@@ -1,11 +1,74 @@
 <script setup lang="ts">
+import Text from "@/components/normal/Text.vue";
+import {onMounted, ref} from "vue";
+import {searchProject} from "@/api/market/api.ts";
+import type {WorkProject} from "@/api/workbench/type.ts";
 
+let WorkList = ref<WorkProject[]>([])
+const getWorkList = async () => {
+  WorkList.value = await searchProject()
+  console.log(WorkList.value)
+}
+onMounted(() => {
+  getWorkList()
+})
 </script>
 
 <template>
-
+  <div class="workbench">
+    <div>
+      <Text>我的工作台</Text>
+    </div>
+    <div class="projectList">
+      <div class="projectCard">
+        <button>
+          <Text>+ Creat new project</Text>
+        </button>
+      </div>
+      <div
+        v-for="(item,index) in WorkList"
+        :key="index"
+        class="projectCard"
+      >
+        <Text>{{item.name}}</Text>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-
+.workbench{
+  width:90%;
+  margin:auto;
+  background-color: rgba(255, 255, 255, 0.63);
+}
+.projectList{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.projectCard{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  border: solid 1px #e0e0e0;
+  border-radius: 10px;
+  margin:20px;
+}
+button{
+  background-color: #000000;
+  color: white;
+}
+@media (max-width: 1024px) {
+  .projectList{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (max-width: 700px) {
+  .projectList{
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}
 </style>