搜索功能完善

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.4.0",
+        "codemirror": "^6.0.1",
         "core-js": "^3.8.3",
         "element-tiptap": "^1.27.1",
         "element-ui": "^2.15.13",
@@ -1818,6 +1819,82 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.8.1.tgz",
+      "integrity": "sha512-HpphvDcTdOx+9R3eUw9hZK9JA77jlaBF0kOt2McbyfvY0rX9pnMoO8rkkZc0GzSbzhIY4m5xJ0uHHgjfqHNmXQ==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.6.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.2.4",
+      "resolved": "https://registry.npmmirror.com/@codemirror/commands/-/commands-6.2.4.tgz",
+      "integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.2.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/language/-/language-6.8.0.tgz",
+      "integrity": "sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lint/-/lint-6.4.0.tgz",
+      "integrity": "sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/search/-/search-6.5.0.tgz",
+      "integrity": "sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/@codemirror/state/-/state-6.2.1.tgz",
+      "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/view/-/view-6.14.0.tgz",
+      "integrity": "sha512-I263FPs4In42MNmrdwN2DfmYPFMVMXgT7o/mxdGp4jv5LPs8i0FOxzmxF5yeeQdYSTztb2ZhmPIu0ahveInVTg==",
+      "dependencies": {
+        "@codemirror/state": "^6.1.4",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -1993,6 +2070,27 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@lezer/common": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@lezer/common/-/common-1.0.3.tgz",
+      "integrity": "sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA=="
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/@lezer/highlight/-/highlight-1.1.6.tgz",
+      "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmmirror.com/@lezer/lr/-/lr-1.3.9.tgz",
+      "integrity": "sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmmirror.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -4364,9 +4462,18 @@
       }
     },
     "node_modules/codemirror": {
-      "version": "5.65.13",
+      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.13.tgz",
+      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.1.tgz",
-      "integrity": "sha512-SVWEzKXmbHmTQQWaz03Shrh4nybG0wXx2MEu3FO4ezbPW8IbnZEd5iGHGEffSUaitKYa3i+pHpBsSvw8sPHtzg=="
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
@@ -4628,6 +4735,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -5356,6 +5468,11 @@
         "vue": "^2.0.0"
       }
     },
+    "node_modules/element-tiptap/node_modules/codemirror": {
+      "version": "5.65.13",
+      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.13.tgz",
+      "integrity": "sha512-SVWEzKXmbHmTQQWaz03Shrh4nybG0wXx2MEu3FO4ezbPW8IbnZEd5iGHGEffSUaitKYa3i+pHpBsSvw8sPHtzg=="
+    },
     "node_modules/element-ui": {
       "version": "2.15.13",
       "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.13.tgz",
@@ -11419,6 +11536,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/style-mod/-/style-mod-4.0.3.tgz",
+      "integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -14322,6 +14444,76 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@codemirror/autocomplete": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.8.1.tgz",
+      "integrity": "sha512-HpphvDcTdOx+9R3eUw9hZK9JA77jlaBF0kOt2McbyfvY0rX9pnMoO8rkkZc0GzSbzhIY4m5xJ0uHHgjfqHNmXQ==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.6.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@codemirror/commands": {
+      "version": "6.2.4",
+      "resolved": "https://registry.npmmirror.com/@codemirror/commands/-/commands-6.2.4.tgz",
+      "integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.2.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@codemirror/language": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/language/-/language-6.8.0.tgz",
+      "integrity": "sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "@codemirror/lint": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lint/-/lint-6.4.0.tgz",
+      "integrity": "sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/search": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/search/-/search-6.5.0.tgz",
+      "integrity": "sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/state": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/@codemirror/state/-/state-6.2.1.tgz",
+      "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
+    },
+    "@codemirror/view": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmmirror.com/@codemirror/view/-/view-6.14.0.tgz",
+      "integrity": "sha512-I263FPs4In42MNmrdwN2DfmYPFMVMXgT7o/mxdGp4jv5LPs8i0FOxzmxF5yeeQdYSTztb2ZhmPIu0ahveInVTg==",
+      "requires": {
+        "@codemirror/state": "^6.1.4",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -14474,6 +14666,27 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "@lezer/common": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@lezer/common/-/common-1.0.3.tgz",
+      "integrity": "sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA=="
+    },
+    "@lezer/highlight": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/@lezer/highlight/-/highlight-1.1.6.tgz",
+      "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@lezer/lr": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmmirror.com/@lezer/lr/-/lr-1.3.9.tgz",
+      "integrity": "sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==",
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmmirror.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -16435,9 +16648,18 @@
       }
     },
     "codemirror": {
-      "version": "5.65.13",
+      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.13.tgz",
+      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.1.tgz",
-      "integrity": "sha512-SVWEzKXmbHmTQQWaz03Shrh4nybG0wXx2MEu3FO4ezbPW8IbnZEd5iGHGEffSUaitKYa3i+pHpBsSvw8sPHtzg=="
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
     },
     "color-convert": {
       "version": "1.9.3",
@@ -16659,6 +16881,11 @@
         "yaml": "^1.10.0"
       }
     },
+    "crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -17220,6 +17447,13 @@
         "vue-awesome": "^4.0.2",
         "vue-class-component": "^7.0.2",
         "vue-property-decorator": "^8.3.0"
+      },
+      "dependencies": {
+        "codemirror": {
+          "version": "5.65.13",
+          "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.13.tgz",
+          "integrity": "sha512-SVWEzKXmbHmTQQWaz03Shrh4nybG0wXx2MEu3FO4ezbPW8IbnZEd5iGHGEffSUaitKYa3i+pHpBsSvw8sPHtzg=="
+        }
       }
     },
     "element-ui": {
@@ -22029,6 +22263,11 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-mod": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/style-mod/-/style-mod-4.0.3.tgz",
+      "integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
+    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
+    "codemirror": "^6.0.1",
     "core-js": "^3.8.3",
     "element-tiptap": "^1.27.1",
     "element-ui": "^2.15.13",

src/components/Home/Header.vue

@@ -15,19 +15,52 @@
             <el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
         </el-menu>
         <SearchInput class="HeaderInput"></SearchInput>
-        <el-button v-if="this.$route.path!=='/paper'" class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
+        <el-button  v-if="this.$route.path!=='/paper'" class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
-        <el-button v-if="this.$route.path ==='/paper'" class="HeaderSubmitBtn" type="primary" round icon="el-icon-edit">发布文章</el-button>
+        <el-button @click="openPublishDialog" v-if="this.$route.path ==='/paper'" class="HeaderSubmitBtn" type="primary" round icon="el-icon-edit">发布文章</el-button>
+
+        <el-dialog
+            :visible.sync="openPublishArticle"
+            width="55vw"
+            append-to-body
+            :close-on-click-modal="false"
+            >
+            <div slot="title" class="dialog-title" style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center">
+                <span class="title-text" style="font-size: 18px;font-weight: bold;">发布文章</span>
+            </div>
+            <div>
+                <PublishArticle></PublishArticle>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import SearchInput from "@/components/Home/SearchInput.vue";
+import PublishArticle from "@/components/Paper/PublishArticle.vue";
+import Vue from "vue";
 
 export default {
     name: "HeaderComponent",
-    components: {SearchInput},
+    components: {PublishArticle, SearchInput},
     data() {
-        return {}
+        return {
+            openPublishArticle:false,
+        }
+    },
+    methods:{
+        openPublishDialog(){
+            if(this.$cookie.get('username')){
+                this.openPublishArticle=true;
+            }else{
+                Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: "请先登录!",
+                    offset: 50
+                });
+            }
+
+
+        },
     }
 }
 </script>

src/components/Home/Home.vue

@@ -1,7 +1,7 @@
 <template>
     <el-container style="display: flex;flex-direction: row;">
         <el-aside width="22vw"
-                  style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
+                  style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 7vh;">
             <template>
                 <el-card class="box-card"
                          style="position: fixed;width: 10vw;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
@@ -31,7 +31,7 @@
         <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap;">
             <template>
                 <div class="main">
-                    <el-tabs v-model="activeName" type="border-card" style="width: 45vw;" @tab-click="tabChange">
+                    <el-tabs v-model="activeName" type="border-card" style=";margin-top:2.5vh;width: 45vw;" @tab-click="tabChange">
                         <el-tab-pane label="最新" name="first">
                             <ul
                                     class="list"
@@ -68,7 +68,7 @@
                         </el-tab-pane>
                     </el-tabs>
                 </div>
-                <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
+                <div style="margin-top: 2.5vh;margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
                     <el-card class="box-card" style="width: 15vw">
                         <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
                         <UserInfo></UserInfo>
@@ -196,7 +196,6 @@ export default {
                     num: "0",
                 }
             }).then((res)=>{
-                // console.log(res.data);
                 that.projectLists=res.data;
             });
         },
@@ -212,7 +211,6 @@ export default {
                     name:name
                 }
             }).then((res)=>{
-                // console.log(res.data);
                 that.projectLists=res.data;
             });
         },

src/components/Home/LoginDialog.vue

@@ -206,7 +206,7 @@ export default {
                             _this.$emit('update:loginDialogVisible', false);
                             setTimeout(()=>{
                                 window.location.reload();
-                            },1000)
+                            },800)
 
                         } else {
                             Vue.prototype.$notify.error({

src/components/Home/SearchInput.vue

@@ -37,18 +37,37 @@
                     </div>
 
                 </div>
+                <div style="margin-top: 10px">
+                    <div style="display: flex;flex-direction: row;justify-content: space-between">
+                        <span class="title">搜索结果</span>
+                        <span class="clear" @click="clearSearchResults"><i class="el-icon-circle-close"></i>清空</span>
+                    </div>
+                    <div>
+                        <el-scrollbar style="height: 50vh" v-show="JSON.parse(JSON.stringify(searchResults)).length!==0">
+                            <div  v-for="(item,index) in JSON.parse(JSON.stringify(searchResults))" :key="index">
+                                <SearchResultsList  :search-result="item"></SearchResultsList>
+                            </div>
+                        </el-scrollbar>
+                        <el-empty v-show="JSON.parse(JSON.stringify(searchResults)).length===0" description="暂无搜索结果" :image-size="50"></el-empty>
+                    </div>
+
+                </div>
             </div>
 
+
         </el-popover>
+
+
+
         <el-input
                 size="medium"
                 :placeholder="tipsWord"
                 style="width: 20vw"
                 clearable
                 v-popover:popover
-                @keyup.enter.native="searchRequest"
+                @keyup.enter.native="searchByInput"
                 v-model="search">
-            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchRequest"></i>
+            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchByInput"></i>
         </el-input>
     </div>
 </template>
@@ -57,8 +76,10 @@
 <script>
 import axios from "axios";
 import Vue from "vue";
+import SearchResultsList from "@/components/Home/SearchResultsList.vue";
 
 export default {
+    components: {SearchResultsList},
     data() {
         return {
 
@@ -67,14 +88,18 @@ export default {
             search: '',
             tipsWord: '',
             historySearch: null,
-            items: [
+            searchResults:[],
-            ]
+            update:true,
         }
     },
+
     methods: {
         handleSearch(word) {
             this.search = word
-            this.searchRequest()
+            this.searchByInput()
+        },
+        clearSearchResults(){
+          this.searchResults=[];
         },
         clearHistory() {
             axios({
@@ -101,14 +126,14 @@ export default {
                 }
             });
         },
-        searchRequest() {
+        // searchRequest() {
-            const params = {
+        //     const params = {
-                word: this.search || this.tipsWord
+        //         word: this.search || this.tipsWord
-            }
+        //     }
-            const queryString = new URLSearchParams(params).toString();
+        //     const queryString = new URLSearchParams(params).toString();
-            const url = `${window.location.origin}/video/search?${queryString}`;
+        //     const url = `${window.location.origin}/video/search?${queryString}`;
-            window.open(url, '_blank');
+        //     window.open(url, '_blank');
-        },
+        // },
         gethistorySearch(){
             var that=this;
             axios({
@@ -148,12 +173,69 @@ export default {
                     });
                 }
             });
+        },
+        searchByInput(){
+            var that=this;
+            if(this.search!==''){
+                axios({
+                    method: 'post',
+                    // 请求的地址
+                    url: 'http://localhost:8082/helloGithub_war_exploded/selectByInput',
+                    // URL 中的查询参数
+                    params: {
+                        content:this.search,
+                    }
+                }).then((res)=>{
+                    // JSON.parse(JSON.stringify(res.data));
+                    that.searchResults= JSON.parse(JSON.stringify(res.data));
+                    if(res.data.code===500){
+                        Vue.prototype.$notify.error({
+                            title: '错误',
+                            message: res.data.msg,
+                            offset: 50
+                        });
+                        that.searchResults=[];
+                        that.reload();
+                    }else{
+                        Vue.prototype.$notify({
+                            title: '成功',
+                            message: ('i', {style: 'color: teal'}, "查询成功"),
+                            type:"success",
+                            offset: 50
+                        });
+                    }
+                });
+            }else{
+                Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: '请输入搜索内容',
+                    offset: 50
+                });
+            }
+
+
+        },
+        reload() {
+            // 移除组件
+            this.update = false
+            // 在组件移除后，重新渲染组件
+            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
+            this.$nextTick(() => {
+                this.update = true
+            })
         }
     },
     mounted() {
         this.tipsWord = "搜索开源项目";
         this.gethistorySearch();
-    }
+
+    },
+    created() {
+        setTimeout(() => {
+            this.visible = true;
+            this.gethistorySearch();
+        }, 200);
+    },
 };
 </script>
 
@@ -174,9 +256,14 @@ export default {
 }
 
 .search-content .search-his span.clear:hover {
-    color: #00aeec;
+    color: #ec0014;
+}
+.clear{
+    cursor: pointer;
+}
+.clear:hover{
+    color: #ec0014;
 }
-
 .search-content .mt {
     margin-top: 10px;
 }

src/components/Home/SearchResultsList.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="SearchResult" @click="goToProjectDeatil" style=";align-items:center;cursor: pointer;margin-top: 5px;display: flex;flex-direction: row;flex-wrap: nowrap">
+     <div style="width: 50px;height: 50px;">
+         <el-avatar  :size="50" :src="searchResult.projectIco"></el-avatar>
+     </div>
+      <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
+          <div style="margin-left:10px;display: flex;flex-direction: row;flex-wrap: nowrap">
+              <span style="font-size: 14px;font-weight: bold">{{briefTitle}}</span>
+          </div>
+          <div style="margin-left:10px;">
+              <span style="font-size: 12px">{{briefContent}}</span>
+          </div>
+          <div style=";margin-left:10px;margin-top: 5px;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: nowrap">
+              <div style="align-items: center;font-size: 12px;color: #9ca3af">
+                  <span>{{formatTime}}</span>
+              </div>
+              <div style="align-items: center;font-size: 12px;color: #9ca3af">
+                  <i class="el-icon-view"></i> <span>{{formatNumber(searchResult.lookCount)}}</span>
+              </div>
+              <div style="align-items: center;font-size: 12px;color: #9ca3af">
+                  <i class="el-icon-star-on"></i> <span>{{formatNumber(searchResult.startNum)}}</span>
+              </div>
+              <div style="margin-left: 10px;justify-content: space-between;display: flex;flex-direction:row;flex-wrap: nowrap;align-items: center;font-size: 12px;color: #9ca3af">
+                  <div style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
+                  <span style="margin-left: 5px">{{searchResult.categoryName}}</span>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "SearchResultsList",
+    props:{
+      searchResult:Object
+    },
+    data(){
+        return{
+        }
+    },
+    methods:{
+        formatNumber(num) {
+            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
+        },
+        goToProjectDeatil(){
+            this.$router.push({
+                path:'/ProjectDetail',
+                query: {
+                    id: this.searchResult.projectId,
+                    refresh: true
+                }})
+            // console.log(this.$route.query.id)
+        },
+    },
+    computed: {
+        // 对时间进行格式化
+        formatTime: function() {
+            if (this.searchResult) {
+                const dt = new Date(this.searchResult.submitTime)
+                const year=dt.getFullYear()
+                const month = dt.getMonth()
+                const date = dt.getDate()
+                return `${year}-${month}-${date}`
+            }
+            return '';
+        },
+        // 截取文章内容的前 35 个字，并加上省略号
+        briefContent: function() {
+            return this.searchResult.projectDescription.substr(0, 17) + '...';
+        },
+        briefTitle: function() {
+            return this.searchResult.projectTitle.substr(0, 10) + '...';
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.SearchResult:hover{
+    background-color: #eeeeee;
+    border-radius: 10px;
+}
+</style>

src/components/Paper/ArticleDetail.vue

@@ -3,15 +3,15 @@
         <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
             <div class="PageHeader">
                 <br/>
-                <el-page-header  @back="goBack" style="justify-content: center;">
+                <el-page-header  @back="goBack" style="margin-left: 20px">
                     <div slot="title" style="font-size:23px;font-weight: 600;"></div>
-                    <div slot="content" style="font-size:23px;font-weight: 600;">
+                    <div slot="content" style=";display: flex;flex-direction:row;justify-content: flex-start;font-size:23px;font-weight: 600;">
                         {{ArticleTitle}}
                     </div>
                 </el-page-header>
             </div>
             <div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center">
-                    <el-image   fit="cover" style="width: 50vw; height: 35vh" :src="articleico">
+                    <el-image   fit="cover" style="width: 50vw; height: 35vh;margin-top: 20px" :src="articleico">
                         <div slot="placeholder" class="image-slot">
                             加载中<span class="dot">...</span>
                         </div>
@@ -19,7 +19,10 @@
                             <i class="el-icon-picture-outline"></i>
                         </div>
                     </el-image>
-                    <el-tiptap style="margin-top: 20px" v-model="ArticleContent" :readonly="true" :showMenubar="false" :extensions="extensions" />
+
+                <el-card style="border: none;width: 50vw;box-shadow: none;">
+                    <el-tiptap style="margin-top: 20px;text-align: left" v-html="ArticleContent" :readonly="true" :showMenubar="false" :extensions="extensions" />
+                </el-card>
             </div>
         </div>
         <RightTools></RightTools>

src/components/Paper/PublishArticle.vue

@@ -1,10 +1,201 @@
 <template>
+    <div style="display: flex;flex-direction: column;flex-wrap: nowrap;">
+        <el-card style="border: none" shadow="always">
+            <el-form :model="form" :rules="rules" ref="ruleForm" style="display: flex;flex-direction: column">
+                <el-form-item prop="title">
+                    <el-input  placeholder="请输入文章标题" v-model="form.title"></el-input>
+                </el-form-item>
+                <el-form-item prop="icon">
+                    <el-input placeholder="请输入文章缩略图" v-model="form.icon"></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-tiptap style="margin-top: 20px" v-model="form.content" :readonly="false" :showMenubar="true"
+                               :extensions="extensions"/>
+                </el-form-item >
+                <el-form-item style="display: flex;flex-direction: row;justify-content: center;" prop="content">
+                    <el-button @click="publishArticle('ruleForm')" type="success" icon="el-icon-check" circle></el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
 
+    </div>
 </template>
 
 <script>
+import {
+    Doc,
+    Text,
+    Paragraph,
+    Heading,
+    Bold,
+    Italic,
+    Strike,
+    Underline,
+    Link,
+    Image,
+    Iframe,
+    CodeBlock,
+    Blockquote,
+    ListItem,
+    BulletList,
+    OrderedList,
+    TodoItem,
+    TodoList,
+    TextAlign,
+    Indent,
+    LineHeight,
+    HorizontalRule,
+    HardBreak,
+    TrailingNode,
+    History,
+    Table,
+    TableHeader,
+    TableCell,
+    TableRow,
+    FormatClear,
+    TextColor,
+    TextHighlight,
+    Preview,
+    Print,
+    SelectAll,
+    FontType,
+    FontSize,
+    CodeView,
+} from "element-tiptap";
+import axios from "axios";
+import Vue from "vue";
+
 export default {
-    name: "PublishArticle"
+    name: "PublishArticle",
+    props: {
+        openPublishDialog: Boolean
+    },
+    data() {
+        return {
+            extensions: [
+                new Link,
+                new Image({
+                        uploadRequest:(file) => {
+                            const data = new FormData();
+                            data.append('file', file);
+                            axios({
+                                method: 'post',
+                                headers:{
+                                    "Access-Control-Allow-Origin": "*",
+                                    'crossOrigin':'anonymous'
+                                },
+                                // 请求的地址
+                                url: 'http://localhost:8082/helloGithub_war_exploded/upload',
+                                // URL 中的查询参数
+                                params: {
+                                    name:file.name,
+                                    file:data
+                                }
+                            }).then(function (res) {
+                                return res.data.url;
+                            });
+                        }
+                        }),
+                new Iframe,
+                new CodeBlock,
+                new Blockquote,
+                new Doc(),
+                new Text(),
+                new Paragraph(),
+                new Heading({level: 5}), // 支持多级标题，设置为5级
+                new Bold({bubble: true}), // 在气泡菜单中渲染菜单按钮
+                new Underline({bubble: true, menubar: true}), // 在气泡菜单而不在菜单栏中渲染菜单按钮
+                new Italic(),
+                new Strike(),
+                new ListItem(),
+                new BulletList(),
+                new OrderedList(),
+                new TodoItem,
+                new TodoList,
+                new TextAlign({alignments: ['left', 'center', 'right', 'justify'],}),
+                new Indent({
+                    minIndent: 0,
+                    maxIndent: 7,
+                }),
+                new LineHeight({lineHeights: ['100%', '200%', '300%']}),
+                new HorizontalRule,
+                new HardBreak,
+                new TrailingNode,
+                new History,
+                new Table({resizable: true}),
+                new TableHeader,
+                new TableCell,
+                new TableRow,
+                new FormatClear,
+                new TextColor({bubble: true}),
+                new TextHighlight,
+                new Preview,
+                new Print,
+
+                new SelectAll,
+                new FontType,
+                new FontSize,
+                new CodeView,
+            ],
+            // openPublishDialog:false,
+            closePublishArticle: false,
+            form: {
+                title: null,
+                icon: null,
+                content: null,
+            },
+            rules: {
+                title: [
+                    // required：规则，o：失去焦点触发
+                    {required: true, message: "请输入标题", trigger: "blur"},
+                ],
+                icon: [{required: true, message: "请输入缩略图", trigger: "blur"}],
+                content: [{required: true, message: "请输入内容", trigger: "blur"}],
+            },
+        }
+
+    },
+    methods: {
+        modalClose() {
+            this.$emit('update:openPublishDialog', false); // 直接修改父组件的属性
+        },
+        publishArticle(formName){
+            // var that=this;
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    axios({
+                        method: 'post',
+                        // 请求的地址
+                        url: 'http://localhost:8082/helloGithub_war_exploded/articlepublish',
+                        // URL 中的查询参数
+                        params: {
+                            username:this.$cookie.get('username'),
+                            articleTitle:this.form.title,
+                            articleIco:this.form.icon,
+                            articleContent:this.form.content,
+                        }
+                    }).then( (res)=> {
+                        if(res.data.code===200){
+                            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
+                            });
+                        }
+
+                    });
+                }});
+        }
+
+    }
 }
 </script>
 

src/components/Project/ProjectDetail.vue

@@ -211,7 +211,7 @@
                                                       <span style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
                                                       <div style="display: flex;align-items: center">
                                                           <span style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
-                                                          <el-link @click="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
+                                                          <el-link @click.once="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
                                                       </div>
 
                                                   </div>
@@ -250,7 +250,7 @@
                                                       <span style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
                                                       <div style="display: flex;align-items: center">
                                                           <span style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
-                                                          <el-link @click="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
+                                                          <el-link @click.once="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
                                                       </div>
 
                                                   </div>
@@ -419,41 +419,48 @@ export default {
         publishComment(){
             var that=this;
             if(this.$cookie.get('username')!=null){
-                axios({
+                if(this.textarea !==''){
-                    method: 'post',
+                    axios({
-                    // 请求的地址
+                        method: 'post',
-                    url: 'http://localhost:8082/helloGithub_war_exploded/comment',
+                        // 请求的地址
-                    // URL 中的查询参数
+                        url: 'http://localhost:8082/helloGithub_war_exploded/comment',
-                    params: {
+                        // URL 中的查询参数
-                        id:that.$route.query.id,
+                        params: {
-                        star:that.startValue,
+                            id:that.$route.query.id,
-                        content:that.textarea,
+                            star:that.startValue,
-                        isUsed: that.radio,
+                            content:that.textarea,
-                    }
+                            isUsed: that.radio,
-                }).then(function (res) {
+                        }
-                    if (res.data.code === 200) {
+                    }).then(function (res) {
-                        Vue.prototype.$notify({
+                        if (res.data.code === 200) {
-                            title: '成功',
+                            Vue.prototype.$notify({
-                            message: ('i', {style: 'color: teal'}, res.data.msg),
+                                title: '成功',
-                            type: 'success',
+                                message: ('i', {style: 'color: teal'}, res.data.msg),
-                            offset: 50
+                                type: 'success',
-                        });
+                                offset: 50
-                        that.getLastComment();
+                            });
-                        that.reload();
+                            that.getLastComment();
-                    } else {
+                            that.reload();
-                        Vue.prototype.$notify.error({
+                        } else {
-                            title: '错误',
+                            Vue.prototype.$notify.error({
-                            message: res.data.msg,
+                                title: '错误',
-                            offset: 50
+                                message: res.data.msg,
-                        });
+                                offset: 50
-                    }
+                            });
-                });
+                        }
+                    });
+                }else{
+                    Vue.prototype.$notify.error({
+                        title: '错误',
+                        message: "请填写评论内容！",
+                        offset: 50
+                    });
+                }
+
+
+
             }else{
-                Vue.prototype.$notify.error({
+
-                    title: '错误',
-                    message: "你还未登录！",
-                    offset: 50
-                });
             }
 
 

src/components/Project/ProjectList.vue

@@ -4,8 +4,9 @@
             <img :src="projectLists.projectIco" style="width: 5vw;height: 5vw;margin-left: 10px;border-radius: 10px">
         </div>
         <div style="height: 12vh;margin-left: 5px;width: auto;display: flex;flex-direction: column;justify-content: space-between">
-            <div class="ProjectTitle" style="font-size: 16px;font-weight: bold;">
+            <div class="ProjectTitle" style="font-size: 16px;font-weight: bold;display: flex;flex-direction: row;align-items: center;justify-content: space-between">
                 <span>{{projectLists.projectTitle}}</span>
+                <el-tag style="font-size: 14px;height: 20px;text-align: center;display: flex;align-items: center;border-radius: 10px" v-if="projectLists.num>0" type="success">{{projectLists.num}}</el-tag>
             </div>
             <div class="summary">
                 <span style="font-size: 1rem">{{brief}}</span>

src/components/User/UserInfo.vue

@@ -1,11 +1,11 @@
 <template>
     <div style="display: flex;flex-direction: column;flex-wrap: nowrap" v-show="this.$cookie.get('username')!=null">
-        <div style="display: flex;flex-direction: row;align-items: center;width: 11vw;justify-content: space-between">
+        <div @click="toUserPage" style="display: flex;flex-direction: row;align-items: center;width: 11vw;justify-content: space-between">
             <div style="display: flex;flex-direction: row;align-items: center">
-                <el-avatar shape="square" style=" background-color: #59A3A4;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" size="large">{{this.$cookie.get('username')}}</el-avatar>
+                <el-avatar  shape="square" style=" cursor: pointer;background-color: #59A3A4;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" size="large">{{this.$cookie.get('username')}}</el-avatar>
                 <div style="margin-left: 5px;display: flex;flex-direction: column;justify-content: space-evenly">
-                    <span style="font-weight: bold">{{this.$cookie.get('username')}}</span>
+                    <span style="cursor: pointer;font-weight: bold">{{this.$cookie.get('username')}}</span>
-                    <span style="font-weight: 800;font-size: 13px;color: #3b82f6">Lv.1</span>
+                    <span style="cursor: pointer;font-weight: 800;font-size: 13px;color: #3b82f6">Lv.1</span>
                 </div>
             </div>
 
@@ -44,6 +44,7 @@ export default {
     },
     methods:{
         signOut(){
+            this.$cookie.delete('username');
             // deletecookie
             var that=this;
             axios({
@@ -54,7 +55,6 @@ export default {
                 params: {
                 }
             });
-            this.$cookie.delete('username');
             if(this.$cookie.get('username')===null){
                 Vue.prototype.$notify({
                     title: '成功',
@@ -63,10 +63,17 @@ export default {
                     offset: 50
                 });
                 setTimeout(()=>{
-                    this.$router.push({
+                    window.location.reload();
-                        path:'/home',
+                },800)
-                    })
+
-                },1000)
+
+            }else{
+                Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: ('i', {style: 'color: teal'}, "退出失败！"),
+                    type: 'success',
+                    offset: 50
+                });
             }
 
 

vue.config.js

@@ -4,6 +4,7 @@ require('@vue/cli-service')
 //   lintOnSave: false
 // })
 module.exports = {
+  runtimeCompiler: true,
   // 关闭语法检查
   lintOnSave:false,
   devServer: {