添加个人中心

src/router/index.ts

@@ -3,7 +3,10 @@ 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 ProfileView from "../views/profile/index.vue";
 import WorkbenchView from '../views/workbench/workbench.vue'
+import ErrorView from '../views/error/index.vue'
+import PublicComponent from '../views/profile/components/public.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -13,33 +16,19 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
       children: [
-        {
-          path: '',
-          name: 'first',
-          component: MarketView,
-        },
-        {
-          path: 'market',
-          name: 'market',
-          component: MarketView,
-        },
-        {
-          path: 'personal',
-          name: 'personal',
-          component: PersonalView,
-        },
-        {
-          path: 'workbench',
-          name: 'workbench',
-          component: WorkbenchView,
+        { path: '', name: 'first', component: MarketView },
+        { path: 'market', name: 'market', component: MarketView },
+        { path: 'personal', name: 'personal', component: PersonalView },
+        { path: 'profile', name: 'profile', component: ProfileView,
+          children: [
+            { path: '', name: 'public', component: PublicComponent }
+          ]
         },
+        { path: 'workbench', name: 'workbench', component: WorkbenchView },
+        { path: 'error', name: 'error', component: ErrorView },
       ]
     },
-    {
-      path: '/login',
-      name: 'login',
-      component: LoginView,
-    }
+    { path: '/login', name: 'login', component: LoginView }
   ],
 })
 

src/views/error/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="desc">页面正在开发中...</div>
+</template>
+
+<style scoped>
+.desc{
+  display: flex;
+  height: 400px;
+  align-items: center;
+  justify-content: center;
+  font-weight: lighter;
+  font-size: 1.5rem;
+}
+</style>

src/views/home/index.vue

@@ -21,13 +21,14 @@ const selectTab = (index: any) =>{
 // 登陆状态
 import { useAuthStore } from "@/stores/authStore.ts";
 const authStore = useAuthStore();
+const notice = ref('')
 </script>
 
 <template>
   <div class="home">
     <Snackbar></Snackbar>
     <!--通知滚动条-->
-    <div class="notice"></div>
+    <div class="notice" v-if="notice">{{notice}}</div>
     <header class="tabs-bar">
       <nav class="side flex">logo</nav>
       <nav class="flex">
@@ -92,4 +93,8 @@ const authStore = useAuthStore();
   }
 }
 
+.tabs-content{
+  width:90%;
+  margin:auto;
+}
 </style>

src/views/personal/icon/svg1.vue

@@ -0,0 +1,4 @@
+<template>
+<!--  来自https://www.iconfont.cn/collections/detail?spm=a313x.collections_index.i1.d9df05512.43db3a81MjHaOA&cid=50835-->
+  <svg t="1733751480051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2183" width="80" height="80"><path d="M716.8 614.4c141.3888 0 256 114.6112 256 256v102.4a51.2 51.2 0 1 1-102.4 0v-102.4c0-84.8256-68.7744-153.6-153.6-153.6H307.2c-84.8256 0-153.6 68.7744-153.6 153.6v102.4a51.2 51.2 0 1 1-102.4 0v-102.4c0-141.3888 114.6112-256 256-256h409.6zM512 0c141.3888 0 256 114.6112 256 256s-114.6112 256-256 256-256-114.6112-256-256S370.6112 0 512 0z m0 102.4c-84.8256 0-153.6 68.7744-153.6 153.6s68.7744 153.6 153.6 153.6 153.6-68.7744 153.6-153.6S596.8256 102.4 512 102.4z" fill="#000000" p-id="2184"></path></svg>
+</template>

src/views/personal/icon/svg2.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg t="1733754056750" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2349" width="200" height="200"><path d="M409.92 386.7264a46.5664 46.5664 0 0 1-34.9952 25.6384l-228.352 33.6256 165.1968 162.0736a47.104 47.104 0 0 1 13.4016 41.5104l-38.976 228.9152 204.1472-108.1472a46.2336 46.2336 0 0 1 43.3152 0l204.16 108.16-38.9888-228.928a47.104 47.104 0 0 1 13.4016-41.5104l165.184-162.0736-228.3392-33.6256a46.5664 46.5664 0 0 1-34.9952-25.6384L512 178.4064l-102.08 208.32z m-72.6528-63.5776L470.272 51.7376c17.0752-34.8544 66.4064-34.8544 83.4688 0l132.992 271.4112 297.4208 43.7888c38.1568 5.6192 53.376 52.864 25.7408 79.9744L794.7136 658.048l50.7776 298.24c6.528 38.3104-33.3824 67.52-67.5328 49.4336L512 864.8064 246.0416 1005.7088c-34.1504 18.0864-74.0608-11.1232-67.5328-49.4208l50.7776-298.2528-215.168-211.1232c-27.6224-27.1104-12.416-74.3552 25.7408-79.9744l297.408-43.7888z" fill="#000000" p-id="2350"></path></svg>
+</template>
+
+<style scoped>
+
+</style>

src/views/personal/icon/svg3.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg t="1733755545456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2515" width="200" height="200"><path d="M512 0c70.6944 0 128 57.3056 128 128v3.6736a27.904 27.904 0 0 0 17.2288 25.5616c10.368 4.5696 22.4896 2.3808 30.2592-5.2224l2.5344-2.5344a128 128 0 0 1 181.0944-0.0384 128 128 0 0 1 0.0128 181.1072l-2.2272 2.2272a27.7376 27.7376 0 0 0-6.3744 28.4928l0.832 2.0864c1.2032 2.7392 2.112 5.5808 2.7264 8.4992a27.6224 27.6224 0 0 0 22.656 12.1472H896c70.6944 0 128 57.3056 128 128s-57.3056 128-128 128h-3.6736a27.7376 27.7376 0 0 0-25.3824 16.8064c-4.7488 10.7904-2.56 22.912 5.0432 30.6816l2.5344 2.5344a128 128 0 0 1 0.0384 181.0944 128 128 0 0 1-181.1072 0.0128l-2.2272-2.2272c-8.1024-7.936-20.224-10.1248-31.0016-5.376a27.6736 27.6736 0 0 0-16.8064 25.216V896c0 70.6944-57.3056 128-128 128s-128-57.3056-128-128c-0.256-13.3888-6.6304-23.0912-18.3808-28.3136l-2.2656-0.9216c-10.368-4.5696-22.4896-2.3808-30.2592 5.2224l-2.5344 2.5344a128 128 0 0 1-181.0944 0.0384 128 128 0 0 1-0.0128-181.1072l2.2272-2.2272c7.936-8.1024 10.1248-20.224 5.376-31.0016a27.6736 27.6736 0 0 0-25.216-16.8064H128c-70.6944 0-128-57.3056-128-128s57.3056-128 128-128c13.3888-0.256 23.0912-6.6304 28.3136-18.3808l0.9216-2.2656c4.5696-10.368 2.3808-22.4896-5.2224-30.2592l-2.5344-2.5344a128 128 0 0 1-0.0384-181.0944 128 128 0 0 1 181.1072-0.0128l2.2272 2.2272a27.7376 27.7376 0 0 0 28.4928 6.3744l2.0864-0.832c2.7392-1.2032 5.5808-2.112 8.4992-2.7264a27.6224 27.6224 0 0 0 12.1472-22.656V128c0-70.6944 57.3056-128 128-128z m0 85.3376A42.6624 42.6624 0 0 0 469.3376 128v7.424a113.0624 113.0624 0 0 1-68.5312 103.4752c-3.6096 1.536-7.3984 2.5856-11.264 3.0848a113.28 113.28 0 0 1-116.7744-26.2144l-2.5856-2.5728a42.6624 42.6624 0 0 0-60.4032 0.0256 42.6624 42.6624 0 0 0 0.0128 60.3904l2.8928 2.8928c32.32 33.0496 41.28 82.432 23.6288 122.2272-16.0256 43.5712-57.0624 72.9216-104.4736 74.0096H128a42.6624 42.6624 0 0 0 0 85.3376h7.424c45.056 0.1792 85.7216 27.1104 103.296 68.096a113.216 113.216 0 0 1-22.9504 125.056l-2.5728 2.5856a42.6624 42.6624 0 0 0 0.0256 60.4032 42.6624 42.6624 0 0 0 60.3904-0.0128l2.8928-2.8928c33.0496-32.32 82.432-41.28 122.2272-23.6288 43.5712 16.0256 72.9216 57.0624 74.0096 104.4736v3.84a42.6624 42.6624 0 0 0 85.3376 0v-7.424c0.1792-45.056 27.1104-85.7216 68.096-103.296a113.216 113.216 0 0 1 125.056 22.9504l2.5856 2.5728a42.6624 42.6624 0 0 0 60.4032-0.0256 42.6624 42.6624 0 0 0-0.0128-60.3904l-2.8928-2.8928a113.0624 113.0624 0 0 1-22.6176-124.7232c17.5744-40.9984 58.2272-67.9296 103.4624-68.096h3.84a42.6624 42.6624 0 1 0 0-85.3376h-7.424a113.0624 113.0624 0 0 1-103.4752-68.5312 42.6624 42.6624 0 0 1-3.0848-11.264 113.28 113.28 0 0 1 26.2144-116.7744l2.5728-2.5856a42.6624 42.6624 0 0 0-0.0256-60.4032 42.6624 42.6624 0 0 0-60.3904 0.0128l-2.8928 2.8928c-33.0496 32.32-82.432 41.28-124.3008 22.7968a113.1264 113.1264 0 0 1-68.5312-103.6416V128A42.6624 42.6624 0 0 0 512 85.3376z m0 256c94.2592 0 170.6624 76.416 170.6624 170.6624 0 94.2592-76.416 170.6624-170.6624 170.6624-94.2592 0-170.6624-76.416-170.6624-170.6624 0-94.2592 76.416-170.6624 170.6624-170.6624z m0 256a85.3376 85.3376 0 1 0 0-170.6752 85.3376 85.3376 0 0 0 0 170.6752z" fill="#000000" p-id="2516"></path></svg>
+</template>
+
+<style scoped>
+
+</style>

src/views/personal/icon/svg4.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg t="1733757036680" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2681" width="200" height="200"><path d="M791.2704 0a46.5408 46.5408 0 0 1 46.5536 46.5408l-0.0128 279.2704h46.5536c75.8784 0 137.6128 60.5184 139.584 135.9232l0.0512 3.712v232.7296c0 77.12-62.5152 139.648-139.648 139.648l-46.5408-0.0128v139.648A46.5408 46.5408 0 0 1 791.2832 1024H232.7296a46.5408 46.5408 0 0 1-46.5536-46.5408v-139.648h-46.5408C63.7568 837.824 2.0224 777.3184 0.0512 701.9136L0 698.1888V465.4464c0-77.12 62.5152-139.648 139.648-139.648h46.528V46.5408A46.5536 46.5536 0 0 1 230.272 0.064L232.7296 0h558.5408z m-46.5408 651.648H279.2704v279.2576h465.4592V651.648zM884.352 418.8928H139.6352a46.5408 46.5408 0 0 0-46.5408 46.5536v232.7168a46.5408 46.5408 0 0 0 46.5408 46.5536l46.5408-0.0128V605.0944a46.5408 46.5408 0 0 1 46.5536-46.5536h558.5408a46.5408 46.5408 0 0 1 46.5536 46.5536l-0.0128 139.6224h46.5536a46.5536 46.5536 0 0 0 46.4768-44.0576l0.064-2.4832V465.4592a46.5408 46.5408 0 0 0-46.5408-46.5536zM744.704 93.0944H279.2832v232.7168h465.4464V93.0944z" fill="#000000" p-id="2682"></path></svg>
+</template>

src/views/personal/index.vue

@@ -1,19 +1,94 @@
 <script setup lang="ts">
+import svg1 from "@/views/personal/icon/svg1.vue";
+import svg2 from "@/views/personal/icon/svg2.vue";
+import svg3 from "@/views/personal/icon/svg3.vue";
+import router from "@/router";
+import svg4 from "@/views/personal/icon/svg4.vue";
 
 const setList = [
-  { name: '个人资料和目录', desc: '编辑您的个人资料和目录信息，并将图像上传到您的 Showcase Gallery。', icon: './icon/icon1.svg' },
-  { name: 'home', desc: '', icon: '' },
+  { name: '个人资料和目录',router: '/profile', desc: '编辑您的个人资料和目录信息', icon: svg1 },
+  { name: '我的工作台',router: '/workbench', desc: '查看您收藏的模板', icon: svg4 },
+  { name: '收藏',router: '/error', desc: '查看您收藏的模板', icon: svg2 },
+  { name: '设置',router: '/error', desc: '查看您收藏的模板', icon: svg3 },
 ]
 </script>
 
 <template>
   <div class="personal">
-    <div></div>
-
+    <div class="welcome">
+      <div class="desc">欢迎</div>
+      <h1>我的账户</h1>
+      <h4>用户仪表盘</h4>
+      <div class="desc">查看和编辑与您的个人资料、提交、招聘广告、课程、订阅、订单、账单相关的信息，并访问独家内容。</div>
+    </div>
+    <div
+        v-for="(item,index) in setList"
+        :key="index"
+        class="setItem"
+        @click="router.push(item.router)"
+    >
+      <component :is="item.icon" class="icon"/>
+      <div class="name">{{item.name}}</div>
+      <div class="desc">{{item.desc}}</div>
+    </div>
   </div>
 
 </template>
 
 <style scoped>
-
+.personal{
+  display: grid;
+  grid-template-columns: 300px 1fr 1fr 1fr;
+}
+.welcome{
+  grid-row: 1 / 4;
+  margin:20px;
+  .desc{
+    font-weight: lighter;
+    margin-bottom: 10px;
+  }
+  h4{
+    margin-top:50px;
+    margin-bottom: 5px;
+  }
+}
+.setItem{
+  height:200px;
+  margin:20px;
+  background-color: rgba(255, 255, 255, 0.71);
+  border-radius: 10px;
+  box-sizing: border-box;
+  padding:30px 30px;
+  cursor: pointer;
+  .icon{
+    width:35px;
+    height:35px
+  }
+  .name{
+    margin-top:25px;
+    font-weight: bold;
+  }
+  .desc{
+    font-weight: lighter;
+    margin-top:5px;
+  }
+}
+@media (max-width: 1500px) {
+  .personal{
+    display: grid;
+    grid-template-columns: 300px 1fr 1fr;
+  }
+}
+@media (max-width: 1100px) {
+  .personal{
+    display: grid;
+    grid-template-columns: 300px 1fr;
+  }
+}
+@media (max-width: 900px) {
+  .personal{
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}
 </style>

src/views/profile/components/public.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const userInfo = {
+
+}
+const publicList = [
+  { name: "用户名（*）", content:"" },
+  { name: "显示名称（*）", content:"" }
+]
+</script>
+
+<template>
+  <div class="public">
+    <aside>
+      <div>您的个人资料</div>
+      <div>在此处添加有关您的信息。</div>
+    </aside>
+    <div class="publicList">
+      <div
+          v-for="(item,index) in publicList"
+          :key="index"
+          class="publicItem"
+      >
+        <div>{{item.name}}</div>
+        <input v-model="item.content"/>
+      </div>
+    </div>
+    <aside>
+      <button>保存更改</button>
+      <label>如果您进行了任何编辑，请记得在离开此页面之前保存。</label>
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+.public{
+  display: grid;
+  grid-template-columns: 300px 1fr 1fr 1fr;
+}
+aside{
+  width: 300px;
+}
+</style>

src/views/profile/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import router from "@/router";
+
+const tabs = [
+  { name:"公开资料", router:"" },
+  { name:"会员", router:"" },
+]
+</script>
+
+<template>
+  <div class="tabs">
+    <div class=""></div>
+    <div
+        v-for="(item,index) in tabs"
+        :key="index"
+        class="tab"
+        @click="router.push(item.router)"
+    >
+      <div>{{item.name}}</div>
+    </div>
+  </div>
+  <div class="profile">
+    <RouterView></RouterView>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/workbench/workbench.vue

@@ -38,9 +38,7 @@ onMounted(() => {
 
 <style scoped>
 .workbench{
-  width:90%;
-  margin:auto;
-  background-color: rgba(255, 255, 255, 0.63);
+  background-color: rgba(255, 255, 255, 0.37);
 }
 .projectList{
   display: grid;