From 23d901a953d11838a360657f4a0d24a7ad8a84cf Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Tue, 4 Jul 2023 00:40:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E8=AF=A6=E6=83=85=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                   | 319 ++++++++++++++++++++++--
 package.json                        |   1 +
 src/components/Home/Home.vue        | 366 ++--------------------------
 src/components/Home/LoginDialog.vue | 304 +++++++++++++++++++++++
 src/components/Home/ProjectList.vue |  13 +-
 src/components/Home/SearchInput.vue |   7 +-
 src/components/Home/UserInfo.vue    |  30 ++-
 src/components/ProjectDetail.vue    | 366 +++++++++++++++++++++++++++-
 src/components/UserInfoPage.vue     |  31 ++-
 src/main.js                         |   8 +
 src/router/index.js                 |   6 +
 11 files changed, 1064 insertions(+), 387 deletions(-)
 create mode 100644 src/components/Home/LoginDialog.vue

diff --git a/package-lock.json b/package-lock.json
index 1d93d74..5acb87a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "element-ui": "^2.15.13",
         "vue": "^2.6.14",
         "vue-cookie": "^1.1.4",
+        "vue-quill-editor": "^3.0.6",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
       },
@@ -4027,7 +4028,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -4978,6 +4978,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dependencies": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -5135,7 +5148,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -6195,12 +6207,22 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -6486,8 +6508,7 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/functional-red-black-tree": {
       "version": "1.0.1",
@@ -6495,6 +6516,11 @@
       "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
       "dev": true
     },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+    },
     "node_modules/gauge": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/gauge/-/gauge-4.0.4.tgz",
@@ -6548,7 +6574,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -6718,7 +6743,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -6739,7 +6763,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
       }
@@ -6748,7 +6771,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -6757,7 +6779,17 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
       "engines": {
         "node": ">= 0.4"
       }
@@ -7131,6 +7163,18 @@
         "node": ">= 10"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -7170,6 +7214,17 @@
         "has": "^1.0.3"
       }
     },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz",
@@ -7266,6 +7321,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz",
@@ -8982,7 +9049,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8993,11 +9059,22 @@
       "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
       "dev": true
     },
+    "node_modules/object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -9266,6 +9343,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
@@ -10148,6 +10230,45 @@
         "node": ">=8"
       }
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmmirror.com/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/quill/node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
@@ -10312,6 +10433,19 @@
         "@babel/runtime": "^7.8.4"
       }
     },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+      "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "functions-have-names": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/regexpp/-/regexpp-3.2.0.tgz",
@@ -12010,6 +12144,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-quill-editor": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
+      "integrity": "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "quill": "^1.3.4"
+      },
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
@@ -15830,7 +15977,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -16579,6 +16725,19 @@
         }
       }
     },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "requires": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -16699,7 +16858,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "dev": true,
       "requires": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -17549,12 +17707,22 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -17781,8 +17949,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -17790,6 +17957,11 @@
       "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
       "dev": true
     },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+    },
     "gauge": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/gauge/-/gauge-4.0.4.tgz",
@@ -17831,7 +18003,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -17970,7 +18141,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -17985,7 +18155,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.1"
       }
@@ -17993,14 +18162,20 @@
     "has-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
     },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
     },
     "has-unicode": {
       "version": "2.0.1",
@@ -18303,6 +18478,15 @@
       "integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==",
       "dev": true
     },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -18336,6 +18520,14 @@
         "has": "^1.0.3"
       }
     },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz",
@@ -18405,6 +18597,15 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz",
@@ -19773,8 +19974,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
       "version": "1.12.3",
@@ -19782,11 +19982,19 @@
       "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
       "dev": true
     },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
     },
     "object.assign": {
       "version": "4.1.4",
@@ -19997,6 +20205,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
@@ -20621,6 +20834,41 @@
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
       "dev": true
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmmirror.com/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+        },
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmmirror.com/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
@@ -20758,6 +21006,16 @@
         "@babel/runtime": "^7.8.4"
       }
     },
+    "regexp.prototype.flags": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+      "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "functions-have-names": "^1.2.3"
+      }
+    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/regexpp/-/regexpp-3.2.0.tgz",
@@ -22111,6 +22369,15 @@
         }
       }
     },
+    "vue-quill-editor": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
+      "integrity": "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "quill": "^1.3.4"
+      }
+    },
     "vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
diff --git a/package.json b/package.json
index 10ab45c..97ea96b 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "element-ui": "^2.15.13",
     "vue": "^2.6.14",
     "vue-cookie": "^1.1.4",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },
diff --git a/src/components/Home/Home.vue b/src/components/Home/Home.vue
index b9f74d7..6077607 100644
--- a/src/components/Home/Home.vue
+++ b/src/components/Home/Home.vue
@@ -70,7 +70,7 @@
                 </div>
                 <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
                     <el-card class="box-card" style="width: 13vw">
-                        <el-button type="info" plain @click="openLogin()" v-show="this.$cookie.get('username')==null">登 录</el-button>
+                        <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
                         <UserInfo></UserInfo>
                     </el-card>
 
@@ -103,127 +103,8 @@ HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。 
                     </el-card>
                 </div>
             </template>
-            <!--登录弹框-->
-            <el-dialog
-                    title="登录"
-                    :visible.sync="loginDialogVisible"
-                    width="25vw">
-                <div>
-                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
-                        <el-form-item prop="username">
-                            <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
-                            <el-input
-                                    prefix-icon="el-icon-user"
-                                    v-model="ruleForm.username"
-                                    placeholder="用户名"
-                                    auto-complete="off"
-                            ></el-input>
-                        </el-form-item>
-                        <el-form-item prop="password">
-                            <!-- type：密码显示* -->
-                            <el-input
-                                    prefix-icon="el-icon-unlock"
-                                    :type="passwordVisible"
-                                    v-model="ruleForm.password"
-                                    placeholder="密码"
-                                    auto-complete="new-password"
-                            >
-                                <i slot="suffix" :class="icon" @click="showPass"></i>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
-                            <el-input
-                                    prefix-icon="el-icon-mobile-phone"
-                                    type="text"
-                                    placeholder="点击图片更换验证码"
-                                    v-model="ruleForm.code"
-                                    class="vertify_code"
-                                    auto-complete="false"
-                                    style="width: 15.8vw"
-                            ></el-input>
-                            <!-- <span class="code">验证码</span> -->
-                            <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
-                        </el-form-item>
-                        <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
-                            <el-form-item prop="remember">
-                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
-                            </el-form-item>
-
-                            <el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
-                        </div>
-
-                        <div class="login-btn">
-                            <el-button type="primary" @click="submitForm('ruleForm')"
-                            >登录
-                            </el-button
-                            >
-                            <el-button @click="resetForm('ruleForm')">重置</el-button>
-                        </div>
-                    </el-form>
-                </div>
-            </el-dialog>
-
-            <!--注册弹框-->
-            <el-dialog
-                    title="注册"
-                    :visible.sync="registerDialogVisible"
-                    width="25vw">
-                <div>
-                    <el-form :model="resisterRuleForm" :rules="rules" ref="resisterRuleForm" class="form">
-                        <el-form-item prop="username">
-                            <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
-                            <el-input
-                                    prefix-icon="el-icon-user"
-                                    v-model="resisterRuleForm.username"
-                                    placeholder="用户名"
-                                    auto-complete="off"
-                            ></el-input>
-                        </el-form-item>
-                        <el-form-item prop="password">
-                            <!-- type：密码显示* -->
-                            <el-input
-                                    prefix-icon="el-icon-unlock"
-                                    :type="passwordVisible"
-                                    v-model="resisterRuleForm.password"
-                                    placeholder="密码"
-                                    auto-complete="new-password"
-                            >
-                                <i slot="suffix" :class="icon" @click="showPass"></i>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
-                            <el-input
-                                    prefix-icon="el-icon-mobile-phone"
-                                    type="text"
-                                    placeholder="点击图片更换验证码"
-                                    v-model="resisterRuleForm.code"
-                                    class="vertify_code"
-                                    auto-complete="false"
-                                    style="width: 15.8vw"
-                            ></el-input>
-                            <!-- <span class="code">验证码</span> -->
-                            <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
-                        </el-form-item>
-                        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
-                            <!--                            <el-form-item prop="remember">-->
-                            <!--                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
-                            <!--                            </el-form-item>-->
-
-                            <el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
-                        </div>
-
-                        <div class="login-btn" style="margin-top: 10px;">
-                            <el-button type="primary" @click="resisterForm('resisterRuleForm')"
-                            >注册
-                            </el-button
-                            >
-                            <el-button @click="resetForm('ruleForm')">重置</el-button>
-                        </div>
-                    </el-form>
-                </div>
-            </el-dialog>
-
-
+<!--            登录注册-->
+            <LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
             <!--管理标签弹框-->
             <el-dialog
                 :visible.sync="manageCategoryVisible"
@@ -237,19 +118,20 @@ HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。 
                     总共:
                 </el-card>
             </el-dialog>
+            <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
         </el-main>
     </el-container>
 </template>
 
 <script>
 import axios from 'axios'
-import Vue from "vue";
 import ProjectList from "@/components/Home/ProjectList.vue";
 import UserInfo from "@/components/Home/UserInfo.vue";
+import LoginDialog from "@/components/Home/LoginDialog.vue";
 
 export default {
     name: "HomeComponent",
-    components: {UserInfo, ProjectList},
+    components: {LoginDialog, UserInfo, ProjectList},
 
     data() {
         return {
@@ -264,31 +146,7 @@ export default {
             count: 10,
             loading: false,
             loginDialogVisible: false,
-            registerDialogVisible: false,
             manageCategoryVisible:false,
-            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
-            checked: false,
-            passwordVisible: "password",
-            icon: "el-icon-view",
-            ruleForm: {
-                username: null,
-                password: null,
-                code: null,
-                remember: null
-            },
-            resisterRuleForm: {
-                username: null,
-                password: null,
-                code: null,
-            },
-            rules: {
-                username: [
-                    // required：规则，o：失去焦点触发
-                    {required: true, message: "请输入用户名", trigger: "blur"},
-                ],
-                password: [{required: true, message: "请输入密码", trigger: "blur"}],
-                code: [{required: true, message: "请输入验证码", trigger: "blur"}],
-            },
             tags:null,
         };
     },
@@ -300,17 +158,6 @@ export default {
         this.getProjectTotal();
     },
     created() {
-    //     if (sessionStorage.getItem('current_name') == null){
-    //         this.activeIndex = '综合'
-    //     }else{
-    //         this.activeIndex = sessionStorage.getItem('current_name')
-    //     }
-    // },
-    // beforeRouteLeave(to, from, next){
-    //     // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
-    //     // 根据个人需求决定清除的时间
-    //     sessionStorage.removeItem('currentTab')
-    //     next()
     },
     computed: {
         noMore() {
@@ -328,186 +175,7 @@ export default {
             // this.$cookie.delete('username')
             // this.$cookie.delete('password')
         },
-        closeLogin() {
-            this.loginDialogVisible = false;
-        },
-        openResister() {
-            this.registerDialogVisible = true;
-        },
-        closeRegister() {
-            this.registerDialogVisible = false;
-        },
-        // ******登录*****
-        // account() {
-        //     this.ruleForm.username = this.getCookie("username");
-        //     this.ruleForm.password = this.getCookie("password");
-        //     this.CookieUserName=this.getCookie("username");
-        // },
-        // setCookie(c_name, c_pwd, exdate) {
-        //     //账号，密码 ，过期的天数
-        //     exdate = new Date();
-        //     exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
-        //     document.cookie =
-        //         "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
-        //     document.cookie =
-        //         "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
-        // },
-        // getCookie(name) {
-        //     var arr = document.cookie.split(";");
-        //     for (var i = 0; i < arr.length; i++) {
-        //         var arr2 = arr[i].split("=");
-        //         if (arr2[0].trim() == name) {
-        //             return arr2[1];
-        //         }
-        //     }
-        // },
-        // clearCookie() {
-        //     this.setCookie("", "", -1); //清除cookie
-        // },
 
-        // 方法
-        submitForm(formName) {
-            var _this=this;
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                        //存入cookie
-                   // this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
-
-
-                    // } else {
-                    //     this.clearCookie();
-                    // }
-
-                    //调用方法提交
-                    axios({
-                        method: 'post',
-                        // 请求的地址
-                        url: 'http://localhost:8082/helloGithub_war_exploded/userLogin',
-                        // URL 中的查询参数
-                        params: {
-                            username: this.ruleForm.username,
-                            password: this.ruleForm.password,
-                            code: this.ruleForm.code,
-                            remember: this.ruleForm.remember,
-
-                        }
-                    }).then(function (res) {
-                        // Vue.prototype.$message({
-                        //     message: '成功！',
-                        //     type: 'success'
-                        // });
-                        if (res.data.code === 200) {
-                            _this.$cookie.set('username',_this.ruleForm.username,7);
-                            Vue.prototype.$notify({
-                                title: '成功',
-                                message: ('i', {style: 'color: teal'}, res.data.msg),
-                                type: 'success',
-                                offset: 50
-                            });
-                            window.location.reload();
-                        } else {
-                            Vue.prototype.$notify.error({
-                                title: '错误',
-                                message: res.data.msg,
-                                offset: 50
-                            });
-                        }
-                    });
-                } else {
-                    this.closeLogin();
-                    return false;
-                }
-                this.closeLogin();
-
-            });
-        },
-        //点击图片更换验证码
-        resetImg() {
-            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
-        },
-        //重置
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
-        },
-        showPass() {
-            if (this.passwordVisible === "text") {
-                this.passwordVisible = "password";
-                //更换图标
-                this.icon = "el-icon-view";
-            } else {
-                this.passwordVisible = "text";
-                this.icon = "el-icon-lock";
-            }
-        },
-        loginFun() {
-            this.loginDialogVisible = true;
-            this.registerDialogVisible = false;
-        },
-        // ******登录方法结束*****
-
-        // ----------注册------------
-        registerFun() {
-            this.loginDialogVisible = false;
-            this.registerDialogVisible = true;
-        },
-        resisterForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    //取参数
-                    // let params = new URLSearchParams();
-                    // params.append("username", this.ruleForm.username);
-                    // params.append("password", this.ruleForm.password);
-                    // params.append("code", this.ruleForm.code);
-                    // params.append("remember",this.ruleForm.remember)
-                    // if (this.checked == true) {
-                    //     //存入cookie
-                    //     this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
-                    // } else {
-                    //     this.clearCookie();
-                    // }
-
-                    //调用方法提交
-                    axios({
-                        method: 'post',
-                        // 请求的地址
-                        url: 'http://localhost:8082/helloGithub_war_exploded/userRegister',
-                        // URL 中的查询参数
-                        params: {
-                            username: this.resisterRuleForm.username,
-                            password: this.resisterRuleForm.password,
-                            code: this.resisterRuleForm.code,
-
-                        }
-                    }).then(function (res) {
-                        // Vue.prototype.$message({
-                        //     message: '成功！',
-                        //     type: 'success'
-                        // });
-                        if (res.data.code === 200) {
-                            Vue.prototype.$notify({
-                                title: '成功',
-                                message: ('i', {style: 'color: teal'}, res.data.msg),
-                                type: 'success',
-                                offset: 50
-                            });
-                        } else {
-                            Vue.prototype.$notify.error({
-                                title: '错误',
-                                message: res.data.msg,
-                                offset: 50
-                            });
-                        }
-                        // console.log(res);
-                    });
-                } else {
-                    this.closeRegister();
-                    return false;
-                }
-                this.closeRegister();
-
-            });
-        },
-        //----------注册结束----------
         load() {
             this.loading = true
             setTimeout(() => {
@@ -632,40 +300,40 @@ export default {
             }).then((res)=>{
                 that.projectTotal=res.data;
             });
-        }
+        },
 
     }
 }
 </script>
 
-<style>
-.el-scrollbar__wrap {
+<style scoped>
+::v-deep .el-scrollbar__wrap {
     overflow-x: hidden;
 }
 /*去掉切换时el-tab-pane底部的蓝色下划线*/
-.el-tabs__active-bar {
+::v-deep .el-tabs__active-bar {
     background-color: transparent !important;
 }
 
 /*去掉tabs底部的下划线*/
-.el-tabs__nav-wrap::after {
+::v-deep .el-tabs__nav-wrap::after {
     position: static !important;
 }
-.el-tabs__item:hover{
+::v-deep .el-tabs__item:hover{
     background-color: #eeeeee;
 }
-.el-tabs__item{
+::v-deep .el-tabs__item{
     text-align: center;
 }
-.el-tabs__nav{
+::v-deep .el-tabs__nav{
     /*margin-left: 7px;*/
 }
-.el-tabs__item.is-active {
+::v-deep .el-tabs__item.is-active {
     background-color: #eeeeee;
 }
 
-.el-scrollbar__wrap {
-    overflow-y: hidden;
+::v-deep .el-scrollbar__wrap {
+    /*overflow-y: hidden;*/
     overflow-x: hidden;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Home/LoginDialog.vue b/src/components/Home/LoginDialog.vue
new file mode 100644
index 0000000..85eff25
--- /dev/null
+++ b/src/components/Home/LoginDialog.vue
@@ -0,0 +1,304 @@
+<template>
+    <div>
+        <!--登录弹框-->
+        <el-dialog
+            title="登录"
+            :visible.sync="loginDialogVisible"
+            width="25vw"
+            append-to-body
+            :close-on-click-modal="false"
+            :before-close="modalClose">
+            <div>
+                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
+                    <el-form-item prop="username">
+                        <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
+                        <el-input
+                            prefix-icon="el-icon-user"
+                            v-model="ruleForm.username"
+                            placeholder="用户名"
+                            auto-complete="off"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <!-- type：密码显示* -->
+                        <el-input
+                            prefix-icon="el-icon-unlock"
+                            :type="passwordVisible"
+                            v-model="ruleForm.password"
+                            placeholder="密码"
+                            auto-complete="new-password"
+                        >
+                            <i slot="suffix" :class="icon" @click="showPass"></i>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
+                        <el-input
+                            prefix-icon="el-icon-mobile-phone"
+                            type="text"
+                            placeholder="点击图片更换验证码"
+                            v-model="ruleForm.code"
+                            class="vertify_code"
+                            auto-complete="false"
+                            style="width: 15.8vw"
+                        ></el-input>
+                        <!-- <span class="code">验证码</span> -->
+                        <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
+                    </el-form-item>
+                    <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
+                        <el-form-item prop="remember">
+                            <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
+                        </el-form-item>
+
+                        <el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
+                    </div>
+
+                    <div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
+                        <el-button type="primary" @click="submitForm('ruleForm')"
+                        >登录
+                        </el-button
+                        >
+                        <el-button @click="resetForm('ruleForm')">重置</el-button>
+                    </div>
+                </el-form>
+            </div>
+        </el-dialog>
+        <!--注册弹框-->
+        <el-dialog
+            title="注册"
+            :visible.sync="registerDialogVisible"
+            width="25vw"
+            append-to-body
+            :close-on-click-modal="false">
+            <div>
+                <el-form :model="resisterRuleForm" :rules="rules" ref="resisterRuleForm" class="form">
+                    <el-form-item prop="username">
+                        <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
+                        <el-input
+                            prefix-icon="el-icon-user"
+                            v-model="resisterRuleForm.username"
+                            placeholder="用户名"
+                            auto-complete="off"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <!-- type：密码显示* -->
+                        <el-input
+                            prefix-icon="el-icon-unlock"
+                            :type="passwordVisible"
+                            v-model="resisterRuleForm.password"
+                            placeholder="密码"
+                            auto-complete="new-password"
+                        >
+                            <i slot="suffix" :class="icon" @click="showPass"></i>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
+                        <el-input
+                            prefix-icon="el-icon-mobile-phone"
+                            type="text"
+                            placeholder="点击图片更换验证码"
+                            v-model="resisterRuleForm.code"
+                            class="vertify_code"
+                            auto-complete="false"
+                            style="width: 15.8vw"
+                        ></el-input>
+                        <!-- <span class="code">验证码</span> -->
+                        <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
+                    </el-form-item>
+                    <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
+                        <!--                            <el-form-item prop="remember">-->
+                        <!--                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
+                        <!--                            </el-form-item>-->
+
+                        <el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
+                    </div>
+
+                    <div class="login-btn" style="margin-top: 10px;display: flex;flex-direction: row;justify-content: space-between">
+                        <el-button type="primary" @click="resisterForm('resisterRuleForm')"
+                        >注册
+                        </el-button
+                        >
+                        <el-button @click="resetForm('ruleForm')">重置</el-button>
+                    </div>
+                </el-form>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import Vue from "vue";
+
+export default {
+    name: "LoginDialog",
+    props:{
+        loginDialogVisible:Boolean
+    },
+    data(){
+        return {
+            // loginDialogVisible:false,
+            registerDialogVisible:false,
+            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
+            checked: false,
+            passwordVisible: "password",
+            icon: "el-icon-view",
+            ruleForm: {
+                username: null,
+                password: null,
+                code: null,
+                remember: null
+            },
+            resisterRuleForm: {
+                username: null,
+                password: null,
+                code: null,
+            },
+            rules: {
+                username: [
+                    // required：规则，o：失去焦点触发
+                    {required: true, message: "请输入用户名", trigger: "blur"},
+                ],
+                password: [{required: true, message: "请输入密码", trigger: "blur"}],
+                code: [{required: true, message: "请输入验证码", trigger: "blur"}],
+            },
+        }
+    },
+    methods:{
+        submitForm(formName) {
+            var _this=this;
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    //存入cookie
+                    // this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
+
+
+                    // } else {
+                    //     this.clearCookie();
+                    // }
+
+                    //调用方法提交
+                    axios({
+                        method: 'post',
+                        // 请求的地址
+                        url: 'http://localhost:8082/helloGithub_war_exploded/userLogin',
+                        // URL 中的查询参数
+                        params: {
+                            username: this.ruleForm.username,
+                            password: this.ruleForm.password,
+                            code: this.ruleForm.code,
+                            remember: this.ruleForm.remember,
+
+                        }
+                    }).then(function (res) {
+                        // Vue.prototype.$message({
+                        //     message: '成功！',
+                        //     type: 'success'
+                        // });
+                        if (res.data.code === 200) {
+                            _this.$cookie.set('username',_this.ruleForm.username,7);
+                            Vue.prototype.$notify({
+                                title: '成功',
+                                message: ('i', {style: 'color: teal'}, res.data.msg),
+                                type: 'success',
+                                offset: 50
+                            });
+                            _this.$emit('update:loginDialogVisible', false);
+                            setTimeout(()=>{
+                                window.location.reload();
+                            },2000)
+
+                        } else {
+                            Vue.prototype.$notify.error({
+                                title: '错误',
+                                message: res.data.msg,
+                                offset: 50
+                            });
+                        }
+                    });
+                } else {
+                    return false;
+                }
+            });
+        },
+
+        resisterForm(formName) {
+            var _this=this;
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    //调用方法提交
+                    axios({
+                        method: 'post',
+                        // 请求的地址
+                        url: 'http://localhost:8082/helloGithub_war_exploded/userRegister',
+                        // URL 中的查询参数
+                        params: {
+                            username: this.resisterRuleForm.username,
+                            password: this.resisterRuleForm.password,
+                            code: this.resisterRuleForm.code,
+
+                        }
+                    }).then(function (res) {
+                        // Vue.prototype.$message({
+                        //     message: '成功！',
+                        //     type: 'success'
+                        // });
+                        if (res.data.code === 200) {
+                            Vue.prototype.$notify({
+                                title: '成功',
+                                message: ('i', {style: 'color: teal'}, res.data.msg),
+                                type: 'success',
+                                offset: 50
+                            });
+                            _this.registerDialogVisible=false;
+                        } else {
+                            Vue.prototype.$notify.error({
+                                title: '错误',
+                                message: res.data.msg,
+                                offset: 50
+                            });
+                        }
+                        // console.log(res);
+                    });
+                } else {
+                    return false;
+                }
+
+            });
+        },
+        //点击图片更换验证码
+        resetImg() {
+            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
+        },
+        //重置
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        showPass() {
+            if (this.passwordVisible === "text") {
+                this.passwordVisible = "password";
+                //更换图标
+                this.icon = "el-icon-view";
+            } else {
+                this.passwordVisible = "text";
+                this.icon = "el-icon-lock";
+            }
+        },
+        registerFun() {
+            this.$emit('update:loginDialogVisible', false);
+            this.registerDialogVisible = true;
+        },
+        loginFun() {
+            this.$emit('update:loginDialogVisible', true);
+            this.registerDialogVisible = false;
+        },
+        modalClose() {
+            this.$emit('update:loginDialogVisible', false); // 直接修改父组件的属性
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Home/ProjectList.vue b/src/components/Home/ProjectList.vue
index edeba33..4623649 100644
--- a/src/components/Home/ProjectList.vue
+++ b/src/components/Home/ProjectList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="ProjectList">
+    <div class="ProjectList" @click="goProjectDetail">
         <div class="projectIco">
             <img :src="projectLists.projectIco" style="width: 5vw;height: 5vw;margin-left: 10px;border-radius: 10px">
         </div>
@@ -55,6 +55,17 @@ export default {
         // 截取文章内容的前 35 个字，并加上省略号
         brief: function() {
             return this.projectLists.projectDescription.substr(0, 33) + '...';
+        },
+
+    },
+    methods:{
+        goProjectDetail(){
+            this.$router.push({
+                    path:'/ProjectDetail',
+                    query: {
+                    id: this.projectLists.projectId,
+                }})
+            // console.log(this.$route.query.id)
         }
     }
 }
diff --git a/src/components/Home/SearchInput.vue b/src/components/Home/SearchInput.vue
index 573e9c0..882103f 100644
--- a/src/components/Home/SearchInput.vue
+++ b/src/components/Home/SearchInput.vue
@@ -116,7 +116,12 @@ export default {
                 }
             }).then((res)=>{
                 // console.log(res.data);
-                that.historySearch=res.data;
+                if(res.data.code===500){
+                    return;
+                }else{
+                    that.historySearch=res.data;
+                }
+
             });
         },
         handleClose(tag){
diff --git a/src/components/Home/UserInfo.vue b/src/components/Home/UserInfo.vue
index 301e5d2..1797524 100644
--- a/src/components/Home/UserInfo.vue
+++ b/src/components/Home/UserInfo.vue
@@ -14,10 +14,10 @@
         </div>
         <div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between;align-items: center">
             <span style="font-size: 10px;color: #9ca3af">贡献值</span>
-            <span style="font-weight: bold;color: #59A3A4;font-size: 20px">0/100</span>
+            <span style="font-weight: bold;color: #59A3A4;font-size: 20px">{{ContributionValue}}/100</span>
         </div>
         <div style="margin-top: 10px">
-            <el-progress :text-inside="true" :stroke-width="15" :percentage="0"></el-progress>
+            <el-progress :text-inside="true" :stroke-width="15" :percentage="ContributionValue"></el-progress>
         </div>
         <el-divider></el-divider>
         <div style="display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;">
@@ -28,13 +28,19 @@
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
     name: "UserInfo",
     data(){
         return{
             switchValue:false,
+            ContributionValue:0,
         }
     },
+    mounted() {
+        this.getContributionValue();
+    },
     methods:{
         signOut(){
             this.$cookie.delete('username');
@@ -42,6 +48,26 @@ export default {
         },
         toUserPage(){
             this.$router.push({path:'/UserInfoPage'})
+        },
+        getContributionValue(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/contributionValue',
+                // URL 中的查询参数
+                params: {
+
+                }
+            }).then((res)=>{
+                // console.log(res);
+                if(res.data.code===500){
+                    return;
+                }else{
+                    that.ContributionValue=res.data;
+                }
+
+            });
         }
     }
 }
diff --git a/src/components/ProjectDetail.vue b/src/components/ProjectDetail.vue
index 7ca715b..aa76589 100644
--- a/src/components/ProjectDetail.vue
+++ b/src/components/ProjectDetail.vue
@@ -1,13 +1,373 @@
 <template>
-  <div></div>
+  <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
+      <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
+          <div class="PageHeader">
+              <br/>
+              <el-page-header  @back="goBack" style="justify-content: center;">
+                  <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+                  <div slot="content" style="font-size:23px;font-weight: 600;">
+                      项目详情
+                  </div>
+              </el-page-header>
+          </div>
+          <div class="PageContent">
+              <el-card class="box-card" style="border: none">
+                  <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
+                      <div style="display: flex;flex-direction: row;align-items: center;">
+                          <el-avatar shape="square" :size="70" :src="projectIco"></el-avatar>
+                          <div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10px">
+                          <span v-if="projectName" style="font-size: 30px;color: black;font-weight: bold;display: flex;justify-content: flex-start">
+                            {{ projectName }}
+                          </span>
+                              <span  style="font-size: 20px;color: rgb(107 114 128);">
+                              {{projectTitle}}
+                          </span>
+                          </div>
+                      </div>
+                      <div style="display: flex;flex-direction: row;justify-content: space-between">
+                          <el-divider direction="vertical" ></el-divider>
+                            <div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: space-between">
+                                <span style="font-size: 14px;color: #6b7280;display: flex;justify-content: flex-start">
+                                    HelloGitHub 评分
+                                </span>
+                                <el-rate v-model="starValue" style="display: flex;justify-content: flex-start" disabled show-score></el-rate>
+                                <span style="font-size: 12px;color: #59A3A4;display: flex;justify-content: flex-start">
+                                    0 人评分
+                                </span>
+                            </div>
+                      </div>
+
+                  </div>
+                  <div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between">
+                      <div style="width: 250px;height: 60px;background-color: #59A3A4">
+
+                      </div>
+                      <div style="display: flex;flex-direction: row;align-items: center;">
+                          <el-dropdown>
+                              <el-button type="primary" style="height: 60px">
+                                  访问<i class="el-icon-arrow-down el-icon--right"></i>
+                              </el-button>
+                              <el-dropdown-menu slot="dropdown">
+                                  <el-dropdown-item><el-link :href="projectUrl">源码</el-link></el-dropdown-item>
+                                  <el-dropdown-item>下载</el-dropdown-item>
+                              </el-dropdown-menu>
+                          </el-dropdown>
+                          <el-button  style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off">点 赞 {{startNum}}</el-button>
+                      </div>
+                  </div>
+
+                  <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top: 10px;justify-content: space-between">
+                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center" >
+                        <span>开源</span><div style="width: 8px;height: 8px;background-color: #9ca3af;border-radius: 50px;margin-left: 5px"></div>
+                        <span style="margin-left: 5px">Apache-2.0</span>
+                    </div>
+                      <div style="display: flex;flex-direction: row;flex-wrap: nowrap;">
+                          <el-link icon="el-icon-chat-dot-square">评论</el-link>
+                          <el-link icon="el-icon-share" style="margin-left: 5px">分享 </el-link>
+                      </div>
+                  </div>
+
+                  <div style="display: flex;margin-top: 20px">
+                      <el-collapse v-model="activeNames">
+                          <el-collapse-item  name="1">
+                              <template slot="title">
+                                  <table>
+                                      <tr>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">星数</th>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">中文</th>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">主语言</th>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">活跃</th>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">贡献者</th>
+                                      </tr>
+                                      <tr>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">512</td>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">是</td>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">C++</td>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">是</td>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">28</td>
+                                      </tr>
+                                  </table>
+                              </template>
+                              <div>
+                                  <table>
+                                      <tr>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Issues</th>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">组织</th>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">最新版本</th>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Forks</th>
+                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">协议</th>
+                                      </tr>
+                                      <tr>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">4</td>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">是</td>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">1.6.7</td>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">92</td>
+                                          <td style="font-size: 20px;color: black;font-weight: bold">Apache-2.0</td>
+                                      </tr>
+                                  </table>
+                              </div>
+                          </el-collapse-item>
+                      </el-collapse>
+                  </div>
+
+                  <div>
+                      <el-tabs v-model="activeName">
+                          <el-tab-pane label="介绍" name="first">
+                              <quill-editor :editorOption="editorOption" :value="projectDescription" :disabled="true"></quill-editor>
+                              <div style="display:flex;align-items: center;flex-direction: row;">
+                                  <span style="font-size: 14px;margin-top: 10px">收录于: </span><el-tag style="margin-left: 10px;margin-top: 10px" size="medium">第 {{periodicals}} 期</el-tag>
+                                  <div style="display: flex;flex-direction: row;margin-left: 10px;margin-top: 10px;align-items: center">
+                                      <span>标签: </span>
+                                      <div style="margin-left: 10px">
+                                          <el-tag v-for="(item,index) in CategoryName" :key="index" size="medium" style="margin-left: 10px">{{item}}</el-tag>
+                                      </div>
+                                  </div>
+                              </div>
+
+                          </el-tab-pane>
+                          <el-tab-pane label="代码" name="second">
+                              <quill-editor :editorOption="editorOption" :disabled="true"></quill-editor>
+                          </el-tab-pane>
+                      </el-tabs>
+                  </div>
+
+              </el-card>
+
+              <el-card class="box-card" style="margin-top: 10px;border: none">
+                  <div slot="header" class="clearfix" style="display: flex;justify-content: flex-start">
+                      <span style="font-size: 24px;font-weight: bold">评论</span>
+                  </div>
+                  <div class="text item">
+                        <div style="display: flex;flex-direction: row;flex-wrap: nowrap">
+                            <div style="width: 50px;height: 50px">
+                                <el-avatar :size="50">{{this.$cookie.get('username')}}</el-avatar>
+                            </div>
+                            <el-input
+                                style="margin-left: 10px"
+                                type="textarea"
+                                :rows="2"
+                                placeholder="请输入内容"
+                                v-model="textarea">
+                            </el-input>
+                        </div>
+                      <div style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center;margin-top: 10px;justify-content: space-between">
+                          <div style="display: flex;flex-direction: row">
+                              <el-radio v-model="radio" label="0" style="margin-left: 60px">没用过</el-radio>
+                              <el-radio v-model="radio" label="1" style="margin-left: -10px">用过</el-radio>
+                          </div>
+
+                          <el-divider direction="vertical"></el-divider>
+                          <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;margin-left: -500px">
+                              <span>评 分:</span>
+                              <el-rate
+                                  style="margin-left: 10px"
+                                  v-model="startValue"
+                                  show-text>
+                              </el-rate>
+                          </div>
+                          <el-button type="primary" plain @click="publishComment">发布</el-button>
+
+                      </div>
+                      <el-divider></el-divider>
+                      <div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
+                          <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+                              <span style="font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
+                              <el-button-group>
+                                  <el-button type="primary" icon="el-icon-star-on" size="small">最新</el-button>
+                                  <el-button type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>
+                              </el-button-group>
+                          </div>
+
+                          <div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
+                              <div style="display: flex;flex-direction: row">
+                                  <div style="width: 50px;height: 50px;">
+                                      <el-avatar  :size="50">{{item.username}}</el-avatar>
+                                  </div>
+                                  <div style="display: flex;flex-direction: column;justify-content: space-between">
+                                      <div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
+                                          <span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
+                                          <span style="margin-left: 10px">评分: </span>
+                                          <el-rate
+                                              style="margin-left: 10px"
+                                              v-model="item.star" disabled>
+                                          </el-rate>
+                                          <span style="margin-left: 10px">
+
+                                              <el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
+                                              <el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
+                                          </span>
+                                      </div>
+                                      <div style="margin-left: 10px;margin-top: 5px">
+                                          <el-card style="border: none;text-align:left;">
+                                              <span>{{item.content}}</span>
+                                          </el-card>
+
+                                      </div>
+                                      <div style="display: flex;justify-content: flex-start;margin-left: 10px;margin-top: 5px">
+                                          <span style="font-size: 14px;color: #9ca3af">{{item.time}}</span>
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
+
+                      </div>
+                  </div>
+              </el-card>
+          </div>
+      </div>
+      <div style="display: flex;margin-left: 20px;margin-top: 7vh;flex-direction: column">
+          <el-card class="box-card" style="width: 13vw;height: auto;border: none">
+              <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
+              <LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
+              <UserInfo></UserInfo>
+          </el-card>
+      </div>
+  </div>
 </template>
 
 <script>
+import axios from "axios";
+import UserInfo from "@/components/Home/UserInfo.vue";
+import LoginDialog from "@/components/Home/LoginDialog.vue";
+
 export default {
-    name: "ProjectDetail"
+    name: "ProjectDetail",
+    components: {LoginDialog, UserInfo},
+    data(){
+        return{
+            starValue:null,
+            activeNames: ['1'],
+            activeName:'first',
+            loginDialogVisible:false,
+            editorOption: {
+                theme: 'bubble',
+                modules: {
+                    toolbar: null,
+                },
+            },
+            textarea:'',
+            radio:'0',
+            startValue: 0,
+            CategoryName:null,
+            projectName:null,
+            projectTitle:null,
+            projectUrl:null,
+            startNum:null,
+            projectDescription:null,
+            projectIco:null,
+            periodicals:null,
+            userId:null,
+            projectId:null,
+            commentContent:[],
+            commentNum:0,
+        }
+    },
+    mounted() {
+        this.getProjectDetail();
+        this.getComment();
+
+    },
+    methods:{
+        goBack() {
+            window.history.go(-1);
+        },
+        getProjectDetail(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectProById',
+                // URL 中的查询参数
+                params: {
+                    id:this.$route.query.id
+                }
+            }).then(function (res) {
+                // console.log(res);
+                that.CategoryName=res.data.CategoryName;
+                that.projectName=res.data.project.projectName;
+                that.projectTitle=res.data.project.projectTitle;
+                that.projectUrl=res.data.project.projectUrl;
+                that.startNum=res.data.project.startNum;
+                that.projectDescription=res.data.project.projectDescription;
+                that.projectIco=res.data.project.projectIco;
+                that.periodicals=res.data.project.periodicals;
+                that.userId=res.data.project.userId;
+                that.projectId=res.data.project.projectId;
+
+            });
+        },
+        openLogin(){
+            this.loginDialogVisible=true;
+        },
+        getComment(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentByPro',
+                // URL 中的查询参数
+                params: {
+                    id:this.$route.query.id
+                }
+            }).then(function (res) {
+                that.commentContent=res.data;
+                that.commentNum=Object.keys(that.commentContent).length;
+            });
+        },
+        publishComment(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/comment',
+                // URL 中的查询参数
+                params: {
+                    id:that.$route.query.id,
+                    star:that.startValue,
+                    content:that.textarea,
+                    isUsed: that.radio,
+                }
+            }).then(function (res) {
+                console.log(res);
+            });
+        }
+    }
+
+
 }
 </script>
 
 <style scoped>
-
+::v-deep .el-page-header__left{
+    left:-300px;
+}
+::v-deep .el-divider--vertical {
+    display: inline-block;
+    width: 1px;
+    height: auto;
+    margin: 0 8px;
+    vertical-align: middle;
+    position: relative;
+}
+::v-deep .el-collapse-item__header {
+    display: flex;
+    align-items: center;
+    height: 100px;
+    line-height: 48px;
+    background-color: #FFFFFF;
+    color: #303133;
+    cursor: pointer;
+    border-bottom: 1px solid #D0E0DB;
+    font-size: 13px;
+    font-weight: 500;
+    transition: border-bottom-color .3s;
+    outline: none;
+}
+::v-deep .ql-toolbar.ql-snow {
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+    padding: 8px;
+    display: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/UserInfoPage.vue b/src/components/UserInfoPage.vue
index 7f01971..23f9e88 100644
--- a/src/components/UserInfoPage.vue
+++ b/src/components/UserInfoPage.vue
@@ -1,15 +1,36 @@
 <template>
-  <div style="margin-top: 30px">
-      个人主页
-  </div>
+    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
+        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
+            <div class="PageHeader">
+                <br/>
+                <el-page-header  @back="goBack" style="justify-content: center;">
+                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+                    <div slot="content" style="font-size:23px;font-weight: 600;">
+                        个人主页
+                    </div>
+                </el-page-header>
+            </div>
+            <div class="PageContent">
+
+            </div>
+        </div>
+
+    </div>
 </template>
 
 <script>
 export default {
-    name: "UserInfoPage"
+    name: "UserInfoPage",
+    methods: {
+        goBack() {
+            window.history.go(-1);
+        }
+    }
 }
 </script>
 
 <style scoped>
-
+::v-deep .el-page-header__left{
+    left:-300px;
+}
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index abb9a55..87c6f8a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,14 @@ import './assets/styles/element-variables.scss'
 import axios from "axios";
 import './assets/icon/iconfont.css'
 import store from './store'
+// 引入富文本组件
+import QuillEditor from 'vue-quill-editor'
+// 引入富文本组件样式
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+Vue.use(QuillEditor)
+
 axios.defaults.withCredentials=true;
 
 import cookie from 'vue-cookie'
diff --git a/src/router/index.js b/src/router/index.js
index da40d85..a9d2dc8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,7 @@ import ranking from "@/components/Ranking.vue";
 import paper from "@/components/Paper.vue";
 import MonthlyDetail from "@/components/Monthly/MonthlyDetail.vue";
 import UserInfoPage from "@/components/UserInfoPage.vue";
+import ProjectDetail from "@/components/ProjectDetail.vue";
 
 Vue.use(VueRouter)
 
@@ -51,6 +52,11 @@ const routes = [
                 name: 'UserInfoPage',
                 component: UserInfoPage
             },
+            {
+                path: '/ProjectDetail',
+                name: 'ProjectDetail',
+                component: ProjectDetail
+            },
         ]
     }