chore: cherry-pick wrong commits from master

src/App.vue

@@ -1,20 +1,13 @@
 <template>
-  <el-container>
-    <el-header>
-      <Header></Header>
-    </el-header>
-    <el-main>
-      <router-view/>
-    </el-main>
-  </el-container>
+  <router-view/>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Header from '@/components/Header.vue';
+// import Header from '@/components/Header.vue';
 
 export default defineComponent({
-  components: { Header },
+  // components: { Header },
 });
 </script>
 

src/assets/icon/bug-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767837659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2106" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 34.8-28.2 63-63 63H232c-34.8 0-63-28.2-63-63 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5 0.2 13 0.7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7 6 17.2 13.6 33.6 22.7 49 24.3 41.5 59 76.2 100.5 100.5S460.5 960 512 960s99.8-13.9 141.3-38.2c41.5-24.3 76.2-59 100.5-100.5 9.1-15.5 16.7-31.9 22.7-49C812.1 793.1 836 831.8 836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7 0.4-6.4 0.7-12.8 0.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM716 680c0 36.8-9.7 72-27.8 102.9-17.7 30.3-43 55.6-73.3 73.3-20.1 11.8-42 20-64.9 24.3V484c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v396.5c-22.9-4.3-44.8-12.5-64.9-24.3-30.3-17.7-55.6-43-73.3-73.3C317.7 752 308 716.8 308 680V412h408v268zM304 280h56c4.4 0 8-3.6 8-8 0-28.3 5.9-53.2 17.1-73.5 10.6-19.4 26-34.8 45.4-45.4C450.9 142 475.7 136 504 136h16c28.3 0 53.2 5.9 73.5 17.1 19.4 10.6 34.8 26 45.4 45.4C650 218.9 656 243.7 656 272c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1-17.2-31.5-42.5-56.8-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9-31.5 17.2-56.8 42.5-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z" p-id="2107" fill="#8a8a8a"></path></svg>

src/assets/icon/bug-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767837659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2106" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 34.8-28.2 63-63 63H232c-34.8 0-63-28.2-63-63 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5 0.2 13 0.7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7 6 17.2 13.6 33.6 22.7 49 24.3 41.5 59 76.2 100.5 100.5S460.5 960 512 960s99.8-13.9 141.3-38.2c41.5-24.3 76.2-59 100.5-100.5 9.1-15.5 16.7-31.9 22.7-49C812.1 793.1 836 831.8 836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7 0.4-6.4 0.7-12.8 0.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM716 680c0 36.8-9.7 72-27.8 102.9-17.7 30.3-43 55.6-73.3 73.3-20.1 11.8-42 20-64.9 24.3V484c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v396.5c-22.9-4.3-44.8-12.5-64.9-24.3-30.3-17.7-55.6-43-73.3-73.3C317.7 752 308 716.8 308 680V412h408v268zM304 280h56c4.4 0 8-3.6 8-8 0-28.3 5.9-53.2 17.1-73.5 10.6-19.4 26-34.8 45.4-45.4C450.9 142 475.7 136 504 136h16c28.3 0 53.2 5.9 73.5 17.1 19.4 10.6 34.8 26 45.4 45.4C650 218.9 656 243.7 656 272c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1-17.2-31.5-42.5-56.8-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9-31.5 17.2-56.8 42.5-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z" p-id="2107" fill="#1296db"></path></svg>

src/assets/icon/bug.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767837659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2106" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 34.8-28.2 63-63 63H232c-34.8 0-63-28.2-63-63 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5 0.2 13 0.7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7 6 17.2 13.6 33.6 22.7 49 24.3 41.5 59 76.2 100.5 100.5S460.5 960 512 960s99.8-13.9 141.3-38.2c41.5-24.3 76.2-59 100.5-100.5 9.1-15.5 16.7-31.9 22.7-49C812.1 793.1 836 831.8 836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7 0.4-6.4 0.7-12.8 0.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM716 680c0 36.8-9.7 72-27.8 102.9-17.7 30.3-43 55.6-73.3 73.3-20.1 11.8-42 20-64.9 24.3V484c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v396.5c-22.9-4.3-44.8-12.5-64.9-24.3-30.3-17.7-55.6-43-73.3-73.3C317.7 752 308 716.8 308 680V412h408v268zM304 280h56c4.4 0 8-3.6 8-8 0-28.3 5.9-53.2 17.1-73.5 10.6-19.4 26-34.8 45.4-45.4C450.9 142 475.7 136 504 136h16c28.3 0 53.2 5.9 73.5 17.1 19.4 10.6 34.8 26 45.4 45.4C650 218.9 656 243.7 656 272c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1-17.2-31.5-42.5-56.8-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9-31.5 17.2-56.8 42.5-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z" p-id="2107" fill="#cdcdcd"></path></svg>

src/assets/icon/menu-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1613109280466" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M170.666667 213.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2906" fill="#BDC3C7"></path><path d="M170.666667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2907" fill="#BDC3C7"></path><path d="M170.666667 810.666667m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2908" fill="#BDC3C7"></path><path d="M896 778.666667H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM362.666667 245.333333h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32zM896 480H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" p-id="2909" fill="#BDC3C7"></path></svg>

src/assets/icon/menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1613109280466" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M170.666667 213.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2906" fill="#ffffff"></path><path d="M170.666667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2907" fill="#ffffff"></path><path d="M170.666667 810.666667m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2908" fill="#ffffff"></path><path d="M896 778.666667H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM362.666667 245.333333h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32zM896 480H362.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h533.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" p-id="2909" fill="#ffffff"></path></svg>

src/assets/icon/navigation-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612766965403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M834.133333 213.333333c-6.4-12.8-17.066667-23.466667-29.866666-27.733333-12.8-4.266667-27.733333-4.266667-40.533334 2.133333L106.666667 501.333333c-14.933333 6.4-25.6 21.333333-29.866667 36.266667-6.4 27.733333 12.8 57.6 40.533333 64l249.6 53.333333 53.333334 249.6c4.266667 17.066667 14.933333 29.866667 29.866666 36.266667 6.4 4.266667 14.933333 4.266667 23.466667 4.266667 19.2 0 38.4-10.666667 49.066667-29.866667l313.6-657.066667c6.4-12.8 6.4-29.866667-2.133334-44.8zM477.866667 861.866667L426.666667 622.933333c-2.133333-12.8-12.8-21.333333-23.466667-23.466666L162.133333 546.133333l601.6-288-285.866666 603.733334z" p-id="2906" fill="#8a8a8a"></path></svg>

src/assets/icon/navigation-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612766965403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M834.133333 213.333333c-6.4-12.8-17.066667-23.466667-29.866666-27.733333-12.8-4.266667-27.733333-4.266667-40.533334 2.133333L106.666667 501.333333c-14.933333 6.4-25.6 21.333333-29.866667 36.266667-6.4 27.733333 12.8 57.6 40.533333 64l249.6 53.333333 53.333334 249.6c4.266667 17.066667 14.933333 29.866667 29.866666 36.266667 6.4 4.266667 14.933333 4.266667 23.466667 4.266667 19.2 0 38.4-10.666667 49.066667-29.866667l313.6-657.066667c6.4-12.8 6.4-29.866667-2.133334-44.8zM477.866667 861.866667L426.666667 622.933333c-2.133333-12.8-12.8-21.333333-23.466667-23.466666L162.133333 546.133333l601.6-288-285.866666 603.733334z" p-id="2906" fill="#1296db"></path></svg>

src/assets/icon/navigation.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612766965403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M834.133333 213.333333c-6.4-12.8-17.066667-23.466667-29.866666-27.733333-12.8-4.266667-27.733333-4.266667-40.533334 2.133333L106.666667 501.333333c-14.933333 6.4-25.6 21.333333-29.866667 36.266667-6.4 27.733333 12.8 57.6 40.533333 64l249.6 53.333333 53.333334 249.6c4.266667 17.066667 14.933333 29.866667 29.866666 36.266667 6.4 4.266667 14.933333 4.266667 23.466667 4.266667 19.2 0 38.4-10.666667 49.066667-29.866667l313.6-657.066667c6.4-12.8 6.4-29.866667-2.133334-44.8zM477.866667 861.866667L426.666667 622.933333c-2.133333-12.8-12.8-21.333333-23.466667-23.466666L162.133333 546.133333l601.6-288-285.866666 603.733334z" p-id="2906" fill="#cdcdcd"></path></svg>

src/assets/icon/plane-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612680417668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5372" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M908.647297 65.629743c10.293437 7.487531 14.502295 17.464767 12.631692 29.939893L801.524534 814.106596c-1.558495 9.046027-6.551206 16.060791-14.969946 21.049409-4.365424 2.494821-9.201569 3.745301-14.502295 3.745301-3.430122 0-7.17133-0.783853-11.228739-2.342348l-211.912387-86.541005L435.706895 888.020002c-5.615904 7.17133-13.254885 10.756995-22.924105 10.756995-4.053316 0-7.483438-0.623193-10.293437-1.870604-5.92392-2.182712-10.680247-5.848195-14.265912-10.992355s-5.380544-10.836813-5.380544-17.076934L382.842897 705.575764 787.022239 210.17993 286.943756 642.894166l-184.7784-75.785034c-11.539824-4.365424-17.775852-12.942777-18.711154-25.731034-0.624217-12.472056 4.364401-21.672602 14.969946-27.596522l778.412652-449.088158c4.680603-2.805906 9.66922-4.208858 14.969946-4.208858C898.046868 60.485583 903.658679 62.200644 908.647297 65.629743L908.647297 65.629743zM908.647297 65.629743" p-id="5373" fill="#bfbfbf"></path></svg>

src/assets/icon/plane-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612680214280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5199" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M908.647297 65.629743c10.293437 7.487531 14.502295 17.464767 12.631692 29.939893L801.524534 814.106596c-1.558495 9.046027-6.551206 16.060791-14.969946 21.049409-4.365424 2.494821-9.201569 3.745301-14.502295 3.745301-3.430122 0-7.17133-0.783853-11.228739-2.342348l-211.912387-86.541005L435.706895 888.020002c-5.615904 7.17133-13.254885 10.756995-22.924105 10.756995-4.053316 0-7.483438-0.623193-10.293437-1.870604-5.92392-2.182712-10.680247-5.848195-14.265912-10.992355s-5.380544-10.836813-5.380544-17.076934L382.842897 705.575764 787.022239 210.17993 286.943756 642.894166l-184.7784-75.785034c-11.539824-4.365424-17.775852-12.942777-18.711154-25.731034-0.624217-12.472056 4.364401-21.672602 14.969946-27.596522l778.412652-449.088158c4.680603-2.805906 9.66922-4.208858 14.969946-4.208858C898.046868 60.485583 903.658679 62.200644 908.647297 65.629743L908.647297 65.629743zM908.647297 65.629743" p-id="5200" fill="#1296db"></path></svg>

src/assets/icon/plane.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612680214280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5199" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M908.647297 65.629743c10.293437 7.487531 14.502295 17.464767 12.631692 29.939893L801.524534 814.106596c-1.558495 9.046027-6.551206 16.060791-14.969946 21.049409-4.365424 2.494821-9.201569 3.745301-14.502295 3.745301-3.430122 0-7.17133-0.783853-11.228739-2.342348l-211.912387-86.541005L435.706895 888.020002c-5.615904 7.17133-13.254885 10.756995-22.924105 10.756995-4.053316 0-7.483438-0.623193-10.293437-1.870604-5.92392-2.182712-10.680247-5.848195-14.265912-10.992355s-5.380544-10.836813-5.380544-17.076934L382.842897 705.575764 787.022239 210.17993 286.943756 642.894166l-184.7784-75.785034c-11.539824-4.365424-17.775852-12.942777-18.711154-25.731034-0.624217-12.472056 4.364401-21.672602 14.969946-27.596522l778.412652-449.088158c4.680603-2.805906 9.66922-4.208858 14.969946-4.208858C898.046868 60.485583 903.658679 62.200644 908.647297 65.629743L908.647297 65.629743zM908.647297 65.629743" p-id="5200"></path></svg>

src/assets/icon/task-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612766997904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3338" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M846.933333 115.2c-8.533333-6.4-21.333333-6.4-29.866666-2.133333 0 0-74.666667 34.133333-174.933334 34.133333-49.066667 0-96-17.066667-145.066666-34.133333-53.333333-19.2-106.666667-38.4-166.4-38.4-119.466667 0-162.133333 40.533333-168.533334 44.8-4.266667 6.4-8.533333 14.933333-8.533333 23.466666V917.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V595.2c14.933333-8.533333 51.2-21.333333 113.066667-21.333333 49.066667 0 96 17.066667 145.066666 34.133333 53.333333 19.2 106.666667 38.4 166.4 38.4 115.2 0 198.4-38.4 200.533334-38.4 10.666667-4.266667 19.2-17.066667 19.2-29.866667V142.933333c0-10.666667-6.4-21.333333-14.933334-27.733333z m-49.066666 441.6c-27.733333 10.666667-85.333333 25.6-155.733334 25.6-49.066667 0-96-17.066667-145.066666-34.133333-53.333333-19.2-106.666667-38.4-166.4-38.4-49.066667 0-87.466667 6.4-113.066667 17.066666V160c14.933333-8.533333 51.2-21.333333 113.066667-21.333333 49.066667 0 96 17.066667 145.066666 34.133333 53.333333 19.2 106.666667 38.4 166.4 38.4 64 0 119.466667-12.8 155.733334-23.466667v369.066667z" p-id="3339" fill="#8a8a8a"></path></svg>

src/assets/icon/task-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612766997904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3338" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M846.933333 115.2c-8.533333-6.4-21.333333-6.4-29.866666-2.133333 0 0-74.666667 34.133333-174.933334 34.133333-49.066667 0-96-17.066667-145.066666-34.133333-53.333333-19.2-106.666667-38.4-166.4-38.4-119.466667 0-162.133333 40.533333-168.533334 44.8-4.266667 6.4-8.533333 14.933333-8.533333 23.466666V917.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V595.2c14.933333-8.533333 51.2-21.333333 113.066667-21.333333 49.066667 0 96 17.066667 145.066666 34.133333 53.333333 19.2 106.666667 38.4 166.4 38.4 115.2 0 198.4-38.4 200.533334-38.4 10.666667-4.266667 19.2-17.066667 19.2-29.866667V142.933333c0-10.666667-6.4-21.333333-14.933334-27.733333z m-49.066666 441.6c-27.733333 10.666667-85.333333 25.6-155.733334 25.6-49.066667 0-96-17.066667-145.066666-34.133333-53.333333-19.2-106.666667-38.4-166.4-38.4-49.066667 0-87.466667 6.4-113.066667 17.066666V160c14.933333-8.533333 51.2-21.333333 113.066667-21.333333 49.066667 0 96 17.066667 145.066666 34.133333 53.333333 19.2 106.666667 38.4 166.4 38.4 64 0 119.466667-12.8 155.733334-23.466667v369.066667z" p-id="3339" fill="#1296db"></path></svg>

src/assets/icon/task.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612766997904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3338" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M846.933333 115.2c-8.533333-6.4-21.333333-6.4-29.866666-2.133333 0 0-74.666667 34.133333-174.933334 34.133333-49.066667 0-96-17.066667-145.066666-34.133333-53.333333-19.2-106.666667-38.4-166.4-38.4-119.466667 0-162.133333 40.533333-168.533334 44.8-4.266667 6.4-8.533333 14.933333-8.533333 23.466666V917.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V595.2c14.933333-8.533333 51.2-21.333333 113.066667-21.333333 49.066667 0 96 17.066667 145.066666 34.133333 53.333333 19.2 106.666667 38.4 166.4 38.4 115.2 0 198.4-38.4 200.533334-38.4 10.666667-4.266667 19.2-17.066667 19.2-29.866667V142.933333c0-10.666667-6.4-21.333333-14.933334-27.733333z m-49.066666 441.6c-27.733333 10.666667-85.333333 25.6-155.733334 25.6-49.066667 0-96-17.066667-145.066666-34.133333-53.333333-19.2-106.666667-38.4-166.4-38.4-49.066667 0-87.466667 6.4-113.066667 17.066666V160c14.933333-8.533333 51.2-21.333333 113.066667-21.333333 49.066667 0 96 17.066667 145.066666 34.133333 53.333333 19.2 106.666667 38.4 166.4 38.4 64 0 119.466667-12.8 155.733334-23.466667v369.066667z" p-id="3339" fill="#cdcdcd"></path></svg>

src/assets/icon/training-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767021968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3868" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M853.333333 202.666667H544V106.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666666v384c0 40.533333 34.133333 74.666667 74.666667 74.666667h187.733333l-87.466667 151.466667c-8.533333 14.933333-4.266667 34.133333 10.666667 42.666666 4.266667 2.133333 10.666667 4.266667 14.933333 4.266667 10.666667 0 21.333333-6.4 27.733334-17.066667l106.666666-183.466666h157.866667l106.666667 183.466666c6.4 10.666667 17.066667 17.066667 27.733333 17.066667 6.4 0 10.666667-2.133333 14.933333-4.266667 14.933333-8.533333 21.333333-27.733333 10.666667-42.666666L661.333333 736h192c40.533333 0 74.666667-34.133333 74.666667-74.666667V277.333333c0-40.533333-34.133333-74.666667-74.666667-74.666666z m10.666667 458.666666c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667V277.333333c0-6.4 4.266667-10.666667 10.666667-10.666666h682.666666c6.4 0 10.666667 4.266667 10.666667 10.666666v384z" p-id="3869" fill="#8a8a8a"></path><path d="M682.666667 501.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h341.333334c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM682.666667 373.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h341.333334c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" p-id="3870" fill="#8a8a8a"></path></svg>

src/assets/icon/training-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767021968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3868" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M853.333333 202.666667H544V106.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666666v384c0 40.533333 34.133333 74.666667 74.666667 74.666667h187.733333l-87.466667 151.466667c-8.533333 14.933333-4.266667 34.133333 10.666667 42.666666 4.266667 2.133333 10.666667 4.266667 14.933333 4.266667 10.666667 0 21.333333-6.4 27.733334-17.066667l106.666666-183.466666h157.866667l106.666667 183.466666c6.4 10.666667 17.066667 17.066667 27.733333 17.066667 6.4 0 10.666667-2.133333 14.933333-4.266667 14.933333-8.533333 21.333333-27.733333 10.666667-42.666666L661.333333 736h192c40.533333 0 74.666667-34.133333 74.666667-74.666667V277.333333c0-40.533333-34.133333-74.666667-74.666667-74.666666z m10.666667 458.666666c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667V277.333333c0-6.4 4.266667-10.666667 10.666667-10.666666h682.666666c6.4 0 10.666667 4.266667 10.666667 10.666666v384z" p-id="3869" fill="#1296db"></path><path d="M682.666667 501.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h341.333334c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM682.666667 373.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h341.333334c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" p-id="3870" fill="#1296db"></path></svg>

src/assets/icon/training.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767021968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3868" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M853.333333 202.666667H544V106.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666666v384c0 40.533333 34.133333 74.666667 74.666667 74.666667h187.733333l-87.466667 151.466667c-8.533333 14.933333-4.266667 34.133333 10.666667 42.666666 4.266667 2.133333 10.666667 4.266667 14.933333 4.266667 10.666667 0 21.333333-6.4 27.733334-17.066667l106.666666-183.466666h157.866667l106.666667 183.466666c6.4 10.666667 17.066667 17.066667 27.733333 17.066667 6.4 0 10.666667-2.133333 14.933333-4.266667 14.933333-8.533333 21.333333-27.733333 10.666667-42.666666L661.333333 736h192c40.533333 0 74.666667-34.133333 74.666667-74.666667V277.333333c0-40.533333-34.133333-74.666667-74.666667-74.666666z m10.666667 458.666666c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667V277.333333c0-6.4 4.266667-10.666667 10.666667-10.666666h682.666666c6.4 0 10.666667 4.266667 10.666667 10.666666v384z" p-id="3869" fill="#cdcdcd"></path><path d="M682.666667 501.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h341.333334c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM682.666667 373.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h341.333334c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" p-id="3870" fill="#cdcdcd"></path></svg>

src/assets/icon/user-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767009478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3603" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z" p-id="3604" fill="#8a8a8a"></path></svg>

src/assets/icon/user-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767009478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3603" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z" p-id="3604" fill="#1296db"></path></svg>

src/assets/icon/user.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612767009478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3603" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z" p-id="3604" fill="#cdcdcd"></path></svg>

src/components/Menu.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="menu-container">
+    <div class="menu-logo">
+      LOGO
+    </div>
+    <div class="project-switcher" v-show="projectList.length>0" ref="switcher">
+      <div class="selected-project-name">{{selectedProject.name}}</div>
+      <div class="icon" @click="handleSwitcherClick"></div>
+      <transition name="expand">
+        <div class="dropdown" v-show="isDropDownExpand">
+          <div
+            v-for="item in projectList"
+            :key="item.id"
+            class="item"
+            @click="handleProjectChange(item)">{{item.name}}</div>
+        </div>
+      </transition>
+    </div>
+    <div class="notify"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Menu',
+  props: {
+    projectList: Array,
+    selectedProject: Object,
+  },
+  data() {
+    return {
+      isDropDownExpand: false,
+    };
+  },
+  mounted() {
+    document.addEventListener('click', (e) => {
+      if (!this.$refs.switcher.contains(e.target)) {
+        this.isDropDownExpand = false;
+      }
+    });
+  },
+  methods: {
+    handleSwitcherClick() {
+      this.isDropDownExpand = !this.isDropDownExpand;
+    },
+    handleProjectChange(item) {
+      this.$emit('project-change', item.id);
+      this.isDropDownExpand = !this.isDropDownExpand;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.menu-container{
+  height: 58px;
+  width: 100%;
+  position: fixed;
+  top:0px;
+  background-color: #34495E;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+}
+.menu-logo{
+  color: #FFFFFF;
+  font-size: 24px;
+  font-weight: bolder;
+  line-height: 58px;
+  margin-left: 30px;
+  transition: all .2s linear;
+}
+.menu-logo:hover{
+  color: #BDC3C7;
+}
+.project-switcher{
+  margin-left: 20px;
+  background-color: #2C3E50;
+  height: 30px;
+  padding: 5px;
+  width: 240px;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  border-radius: 5px;
+  position: relative;
+}
+.project-switcher .icon{
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  margin-left: auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transition: all .2s linear;
+  background-image: url("../assets/icon/menu.svg");
+}
+.project-switcher .icon:hover{
+  background-image: url("../assets/icon/menu-hover.svg");
+}
+.project-switcher .dropdown{
+  width: 240px;
+  position: absolute;
+  background-color: #2C3E50;
+  color: #FFFFFF;
+  top: 39px;
+  left: 0px;
+  padding: 5px;
+  border-radius: 0 0 5px 5px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  transform-origin: 0px 0px;
+}
+.expand-enter-active,.expand-leave-active{
+  transition: all .3s ease-in-out;
+}
+.expand-enter-from,.expand-leave-to{
+  opacity: 0;
+  transform: scaleY(0);
+}
+.project-switcher .selected-project-name{
+  width: 220px;
+  line-height: 30px;
+  color: #FFFFFF;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space:nowrap; overflow:hidden
+}
+.project-switcher .dropdown .item{
+  line-height: 24px;
+  width: 240px;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space:nowrap; overflow:hidden;
+  cursor: pointer;
+}
+.project-switcher .dropdown .item:hover{
+  background-color: #34495E;
+}
+</style>

src/components/SideBar.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="side-bar-container" @click="handleClick">
+      <div :class="{icon:true,selected:selectedIndex === 0}" target="schedule"></div>
+      <div :class="{icon:true,selected:selectedIndex === 1}" target="taskList"></div>
+      <div :class="{icon:true,selected:selectedIndex === 2}" target="bugList"></div>
+      <div :class="{icon:true,selected:selectedIndex === 3}" target="statistic"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SideBar',
+  data() {
+    return {
+      selectedIndex: 0,
+    };
+  },
+  methods: {
+    handleClick(e) {
+      const value = e.target.attributes.target.nodeValue ? e.target.attributes.target.nodeValue : '';
+      switch (value) {
+        case 'schedule':
+          this.selectedIndex = 0;
+          this.$emit('change', 0);
+          break;
+        case 'taskList':
+          this.selectedIndex = 1;
+          this.$emit('change', 1);
+          break;
+        case 'bugList':
+          this.selectedIndex = 2;
+          this.$emit('change', 2);
+          break;
+        case 'statistic':
+          this.selectedIndex = 3;
+          this.$emit('change', 3);
+          break;
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.side-bar-container{
+  width: 42px;
+  height: 100%;
+  position: fixed;
+  top:58px;
+  left: 0;
+  background-color: #ecf0f1;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  padding-top: 20px;
+}
+.icon{
+  width: 28px;
+  height: 28px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-top:16px;
+  transition: all .2s linear;
+}
+.icon:hover{
+  cursor: pointer;
+  transition-duration:0.2s;
+  transform:scale(1.1);
+  transition-timing-function:ease-in-out;
+}
+.icon[target=schedule]{
+  background-image: url("../assets/icon/navigation.svg");
+}
+.icon[target=schedule]:hover{
+  background-image: url("../assets/icon/navigation-hover.svg");
+}
+.icon[target=schedule].selected{
+  background-image: url("../assets/icon/navigation-using.svg");
+}
+.icon[target=taskList]{
+  background-image: url("../assets/icon/task.svg");
+}
+.icon[target=taskList]:hover{
+  background-image: url("../assets/icon/task-hover.svg");
+}
+.icon[target=taskList].selected{
+  background-image: url("../assets/icon/task-using.svg");
+}
+.icon[target=bugList]{
+  background-image: url("../assets/icon/bug.svg");
+}
+.icon[target=bugList]:hover{
+  background-image: url("../assets/icon/bug-hover.svg");
+}
+.icon[target=bugList].selected{
+  background-image: url("../assets/icon/bug-using.svg");
+}
+.icon[target=statistic]{
+  background-image: url("../assets/icon/training.svg");
+}
+.icon[target=statistic]:hover{
+  background-image: url("../assets/icon/training-hover.svg");
+}
+.icon[target=statistic].selected{
+  background-image: url("../assets/icon/training-using.svg");
+}
+</style>

src/utils/axios.ts

@@ -32,7 +32,6 @@ _axios.interceptors.request.use(
   (error) =>
     // Do something with request error
     Promise.reject(error),
-
 );
 
 // Add a response interceptor
@@ -43,7 +42,6 @@ _axios.interceptors.response.use(
   (error) =>
     // Do something with response error
     Promise.reject(error),
-
 );
 
 export default _axios;

src/views/Home.vue

@@ -1,43 +1,45 @@
 <template>
   <div class="home">
-    <section class="poster">
-      <el-carousel>
-        <el-carousel-item>
-          <img alt="Vue logo" src="@/assets/logo.png">
-        </el-carousel-item>
-        <el-carousel-item>
-          <img alt="Vue logo" src="@/assets/logo.png">
-        </el-carousel-item>
-        <el-carousel-item>
-          <img alt="Vue logo" src="@/assets/logo.png">
-        </el-carousel-item>
-      </el-carousel>
-    </section>
-    <el-divider content-position="left">我的项目</el-divider>
-    <div class="my-project">
-      <div v-for="project in projectList" :key="project.projectId">
-        <ProjectCard></ProjectCard>
-      </div>
-    </div>
+    <Menu
+      :project-list="projectList"
+      :selected-project="selectedProject"
+      @project-change="handleProjectChange"></Menu>
+    <ProjectContainer></ProjectContainer>
+    <!--此处应使用router-view,路由登陆后默认路由到ProjectList，选择了project后路由到ProjectContainer-->
   </div>
   {{JSON.stringify(projectList)}}
   {{ready}}
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-import ProjectCard from '@/components/ProjectCard.vue';
-
-import { ProjectAPI } from '@/api';
+import { defineComponent } from 'vue';
+import Menu from '@/components/Menu.vue';
+import ProjectContainer from '@/views/ProjectContainer.vue';
 
 export default defineComponent({
-  components: { ProjectCard },
-  setup() {
-    const projectList = ref<Array<Project>>([]);
-    const projectReady = ref(false);
-
-    // fetch project list
-    return { projectList, projectReady };
+  components: { ProjectContainer, Menu },
+  data() {
+    return {
+      projectList: [
+        { name: '项目一', id: 0 },
+        { name: '项目二', id: 1 },
+        { name: '项目三', id: 2 },
+        { name: '长项目名12312312312123123312', id: 3 },
+      ],
+      selectedProject: {},
+    };
+  },
+  methods: {
+    handleProjectChange(id: number) {
+      console.log(id);
+      this.projectList.forEach((item) => {
+        if (item.id === id) {
+          this.selectedProject = item;
+        }
+      });
+    },
   },
 });
 </script>
+<style scoped>
+</style>

src/views/ProjectContainer.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <SideBar @change="handleTabChange"></SideBar>
+    <div class="container">
+      <router-view></router-view><!--此处路由路由4个功能页-->
+    </div>
+  </div>
+</template>
+
+<script>
+import SideBar from '@/components/SideBar.vue';
+
+export default {
+  name: 'ProjectContainer',
+  components: { SideBar },
+  methods: {
+    handleTabChange(index) {
+      console.log(index);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.container{
+  background-color: #FFFFFF;
+  width: calc(100% - 42px);
+  margin-left: 42px;
+  margin-top: 58px;
+  min-height: 900px;
+}
+
+</style>

src/views/ProjectList.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'ProjectList',
+};
+</script>
+
+<style scoped>
+
+</style>