feat: 完成框架搭建

babel.config.js

@@ -1,15 +1,14 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
   plugins: [
     [
-      'component',
+      'import',
       {
         libraryName: 'element-plus',
-        styleLibraryName: 'theme-chalk',
+        // 由于 customStyleName 在配置中被声明的原因，`style: true` 会被直接忽略掉，
+        // 如果你需要使用 scss 源文件，把文件结尾的扩展名从 `.css` 替换成 `.scss` 就可以了
+        customStyleName: (name) => `element-plus/lib/theme-chalk/${name}.css`
+        ,
       },
     ],
   ],
-
 };

mock/wrapper.js

@@ -1,6 +1,7 @@
-module.exports = function wrapper(object) {
+module.exports = function wrapper(data, message = '') {
   return {
     code: 1,
-    message: object,
+    message,
+    data,
   };
 };

package.json

@@ -30,6 +30,7 @@
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/eslint-config-typescript": "^5.0.2",
     "babel-plugin-component": "^1.1.1",
+    "babel-plugin-import": "^1.13.3",
     "body-parser": "^1.19.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",

src/App.vue

@@ -1,13 +1,14 @@
 <template>
+  <Header></Header>
   <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/components/Header.vue

@@ -1,11 +1,13 @@
 <template>
-  <h1 class="nav-logo">LOGO</h1>
-  <ul>
-    <li class="nav-notification">
-      <router-link to="/notification">notification</router-link>
-    </li>
-    <li class="nav-user">avatar</li>
-  </ul>
+  <header>
+    <h1 class="nav-logo">LOGO</h1>
+    <ul>
+      <li class="nav-notification">
+        <router-link to="/notification">notification</router-link>
+      </li>
+      <li class="nav-user">avatar</li>
+    </ul>
+  </header>
 </template>
 
 <script lang="ts">
@@ -16,7 +18,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 header {
   & > ul {
     list-style: none;

src/components/ProjectCard.vue

@@ -1,14 +1,10 @@
 <template>
-  <el-card class="project-card">
-    <template #header>
-      <div class="clearfix">
-        <span>{{props.name}}</span>
-      </div>
-    </template>
-    <div v-for="o in 4" :key="o" class="text item">
-      {{'列表内容 ' + o }}
+  <div class="project-card" @click="goToProject(id)">
+    <div class="project-name">{{name}}</div>
+    <div class="project-description">
+      {{description}}
     </div>
-  </el-card>
+  </div>
 </template>
 
 <script lang="ts">
@@ -16,7 +12,24 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   props: {
+    id: Number,
     name: String,
+    description: String,
+  },
+  methods: {
+    goToProject(id: number) {
+      this.$router.push(`/project/${id}`);
+    },
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.project-card {
+  display: inline-block;
+  border: 1px solid #ccc;
+  height: 150px;
+  width: 20%;
+  margin: 10px auto;
+}
+</style>

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import axios from '@/utils/axios';
 import { Components, Plugins } from '@/element-plus';
+import 'element-plus/lib/theme-chalk/index.css';
 
 import App from './App.vue';
 import router from './router';

src/router/index.ts

@@ -1,6 +1,6 @@
 import { isUserLoggedIn } from '@/utils/userStatus';
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import { HOME, LOGIN } from './name';
+import { HOME, LOGIN, PROJECT } from './name';
 
 const AuthWrapper = (routeRecord: RouteRecordRaw) => {
   const meta = routeRecord.meta || {};
@@ -29,6 +29,29 @@ const routes: Array<RouteRecordRaw> = [
       hideNavigator: true,
     },
   },
+  AuthWrapper({
+    path: '/project/:projectId',
+    name: PROJECT,
+    component: () => import(/* webpackChunkName: "project" */ '@/views/Project/Project.vue'),
+    children: [
+      {
+        path: 'schedule',
+        component: import(/* webpackChunkName: "project" */'@/views/Project/Schedule.vue'),
+      },
+      {
+        path: 'taskList',
+        component: import(/* webpackChunkName: "project" */'@/views/Project/TaskList.vue'),
+      },
+      {
+        path: 'bugList',
+        component: import(/* webpackChunkName: "project" */'@/views/Project/BugList.vue'),
+      },
+      {
+        path: 'statistics',
+        component: import(/* webpackChunkName: "project" */'@/views/Project/Statistics.vue'),
+      },
+    ],
+  }),
 ];
 
 const router = createRouter({

src/router/name.ts

@@ -1,2 +1,3 @@
 export const HOME = 'Home';
+export const PROJECT = 'Project';
 export const LOGIN = 'Login';

src/utils/userStatus.ts

@@ -1,4 +1,4 @@
 export const isUserLoggedIn = () => {
   const userStatus = JSON.parse(localStorage.getItem('user') || '{}');
-  return userStatus?.login;
+  return userStatus.login;
 };

src/views/Home.vue

@@ -1,30 +1,43 @@
 <template>
   <div class="home">
-    <Menu
-      :project-list="projectList"
-      :selected-project="selectedProject"
-      @project-change="handleProjectChange"></Menu>
-    <ProjectContainer></ProjectContainer>
-    <!--此处应使用router-view,路由登陆后默认路由到ProjectList，选择了project后路由到ProjectContainer-->
+    <div class="poster">
+    <el-carousel>
+      <el-carousel-item><img src="@/assets/logo.png" /></el-carousel-item>
+      <el-carousel-item><img src="@/assets/logo.png" /></el-carousel-item>
+      <el-carousel-item><img src="@/assets/logo.png" /></el-carousel-item>
+    </el-carousel>
+    </div>
+    <div class="project-list">
+      <ProjectCard
+        v-for="project in projectList"
+        :key="project.id"
+        :id="project.id"
+        :name="project.name"
+        :description="project.description"
+      ></ProjectCard>
+    </div>
   </div>
-  {{JSON.stringify(projectList)}}
-  {{ready}}
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Menu from '@/components/Menu.vue';
-import ProjectContainer from '@/views/ProjectContainer.vue';
+import ProjectCard from '@/components/ProjectCard.vue';
 
 export default defineComponent({
-  components: { ProjectContainer, Menu },
+  components: {
+    ProjectCard,
+  },
   data() {
     return {
       projectList: [
-        { name: '项目一', id: 0 },
-        { name: '项目二', id: 1 },
-        { name: '项目三', id: 2 },
-        { name: '长项目名12312312312123123312', id: 3 },
+        { name: '项目一', description: 'asd', id: 0 },
+        { name: '项目二', description: 'asd', id: 1 },
+        { name: '项目三', description: 'asd', id: 2 },
+        { name: '长项目名12312312312123123312', description: 'asd', id: 3 },
+        { name: '项目一', description: 'asd', id: 4 },
+        { name: '项目二', description: 'asd', id: 5 },
+        { name: '项目三', description: 'asd', id: 6 },
+        { name: '长项目名12312312312123123312', description: 'asd', id: 7 },
       ],
       selectedProject: {},
     };
@@ -42,4 +55,8 @@ export default defineComponent({
 });
 </script>
 <style scoped>
+.project-list {
+  display:flex;
+  flex-wrap: wrap;
+}
 </style>

src/views/Login.vue

@@ -10,11 +10,10 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   methods: {
-    login: () => {
-      const userStatus = {
-        login: true,
-      };
-      localStorage.setItem('user', JSON.stringify(userStatus));
+    async login() {
+      window.location = `http://p.seecoder.cn/api/interaction?scope=openid&client_id=seec-devcloud&redirect_uri=${encodeURI(
+        `http://${window.location.host}/api/auth/receive`,
+      )}` as unknown as Location;
     },
   },
 });

src/views/ProjectList.vue → src/views/Project/BugList.vue

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

src/views/Project/Project.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="project">
+    <Menu
+      :project-list="projectList"
+      :selected-project="selectedProject"
+      @project-change="handleProjectChange"></Menu>
+    <ProjectContainer></ProjectContainer>
+    <!--此处应使用router-view,路由登陆后默认路由到ProjectList，选择了project后路由到ProjectContainer-->
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Menu from '@/components/Menu.vue';
+import ProjectContainer from '@/views/ProjectContainer.vue';
+
+export default defineComponent({
+  components: { ProjectContainer, Menu },
+  data() {
+    return {
+      projectList: [
+        { name: '项目一', description: 'asd', id: 0 },
+        { name: '项目二', description: 'asd', id: 1 },
+        { name: '项目三', description: 'asd', id: 2 },
+        { name: '长项目名12312312312123123312', description: 'asd', id: 3 },
+        { name: '项目一', description: 'asd', id: 4 },
+        { name: '项目二', description: 'asd', id: 5 },
+        { name: '项目三', description: 'asd', id: 6 },
+        { name: '长项目名12312312312123123312', description: 'asd', id: 7 },
+      ],
+      selectedProject: {},
+    };
+  },
+  methods: {
+    handleProjectChange(id: number) {
+      this.projectList.forEach((item) => {
+        if (item.id === id) {
+          this.selectedProject = item;
+          this.$router.push(`/project/${id}`);
+        }
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+</style>

src/views/Project/Schedule.vue

@@ -0,0 +1,13 @@
+<template>
+  project-schedule
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style>
+
+</style>

src/views/Project/Statistics.vue

@@ -0,0 +1,13 @@
+<template>
+  project-statistics
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style>
+
+</style>

src/views/Project/TaskList.vue

@@ -0,0 +1,13 @@
+<template>
+  project-task-list
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style>
+
+</style>

yarn.lock

@@ -814,6 +814,13 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/runtime@^7.0.0":
+  version "7.13.7"
+  resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.13.7.tgz#d494e39d198ee9ca04f4dcb76d25d9d7a1dc961a"
+  integrity sha1-1JTjnRmO6coE9Ny3bSXZ16Hclho=
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.11.0", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.12.5.tgz?cache=0&sync_timestamp=1604442914006&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
@@ -939,9 +946,9 @@
     fastq "^1.6.0"
 
 "@popperjs/core@^2.4.4":
-  version "2.6.0"
-  resolved "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
-  integrity sha1-8CIZWv38lC4IjuIQEoWh0xx9cn8=
+  version "2.8.3"
+  resolved "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.8.3.tgz?cache=0&sync_timestamp=1613995241043&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.8.3.tgz#8b4eae3d9dd470c022cb9238128db8b1906e7fca"
+  integrity sha1-i06uPZ3UcMAiy5I4Eo24sZBuf8o=
 
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
@@ -2034,7 +2041,7 @@ async-limiter@~1.0.0:
 
 async-validator@^3.4.0:
   version "3.5.1"
-  resolved "https://registry.npm.taobao.org/async-validator/download/async-validator-3.5.1.tgz?cache=0&sync_timestamp=1605751734916&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-3.5.1.tgz#cd62b9688b2465f48420e27adb47760ab1b5559f"
+  resolved "https://registry.npm.taobao.org/async-validator/download/async-validator-3.5.1.tgz#cd62b9688b2465f48420e27adb47760ab1b5559f"
   integrity sha1-zWK5aIskZfSEIOJ620d2CrG1VZ8=
 
 async@^2.6.2:
@@ -2122,6 +2129,14 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-import@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.npm.taobao.org/babel-plugin-import/download/babel-plugin-import-1.13.3.tgz#9dbbba7d1ac72bd412917a830d445e00941d26d7"
+  integrity sha1-nbu6fRrHK9QSkXqDDUReAJQdJtc=
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -3294,7 +3309,7 @@ date-fns@^1.27.2:
 
 dayjs@1.x:
   version "1.10.4"
-  resolved "https://registry.npm.taobao.org/dayjs/download/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  resolved "https://registry.npm.taobao.org/dayjs/download/dayjs-1.10.4.tgz?cache=0&sync_timestamp=1611309982734&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdayjs%2Fdownload%2Fdayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
   integrity sha1-jlRKm4aD9heD9XCYCoqA6vVKseI=
 
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
@@ -3640,9 +3655,9 @@ elegant-spinner@^1.0.1:
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
 element-plus@^1.0.2-beta.31:
-  version "1.0.2-beta.31"
-  resolved "https://registry.npm.taobao.org/element-plus/download/element-plus-1.0.2-beta.31.tgz#61a96111d9e9dc9d1ea511e213946db681471321"
-  integrity sha1-YalhEdnp3J0epRHiE5RttoFHEyE=
+  version "1.0.2-beta.32"
+  resolved "https://registry.npm.taobao.org/element-plus/download/element-plus-1.0.2-beta.32.tgz#228975cfc2255993ef7ccd90238cea9a707f0742"
+  integrity sha1-Iol1z8IlWZPvfM2QI4zqmnB/B0I=
   dependencies:
     "@popperjs/core" "^2.4.4"
     async-validator "^3.4.0"
@@ -5944,11 +5959,16 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.2.0:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.3, lodash@^4.2.0:
   version "4.17.20"
   resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.20.tgz?cache=0&sync_timestamp=1602337231142&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=
 
+lodash@^4.17.20:
+  version "4.17.21"
+  resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835860585&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/log-symbols/download/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -6274,7 +6294,7 @@ mississippi@^3.0.0:
 
 mitt@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npm.taobao.org/mitt/download/mitt-2.1.0.tgz?cache=0&sync_timestamp=1594823602623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmitt%2Fdownload%2Fmitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
+  resolved "https://registry.npm.taobao.org/mitt/download/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
   integrity sha1-90BXfCMXbGIFsSGylzUU6t4bIjA=
 
 mixin-deep@^1.2.0:
@@ -7833,7 +7853,7 @@ requires-port@^1.0.0:
 
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
-  resolved "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz?cache=0&sync_timestamp=1602337238565&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresize-observer-polyfill%2Fdownload%2Fresize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  resolved "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=
 
 resolve-cwd@^2.0.0: