Merge remote-tracking branch 'origin/master'

src/App.vue

@@ -15,6 +15,7 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+
 }
 
 nav {
@@ -29,4 +30,7 @@ nav a {
 nav a.router-link-exact-active {
   color: #42b983;
 }
+::-webkit-scrollbar{
+    display:none;
+}
 </style>

src/assets/icon/demo_index.html

@@ -54,6 +54,30 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xec50;</span>
+                <div class="name">php</div>
+                <div class="code-name">&amp;#xec50;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">机器学习</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb76;</span>
+                <div class="name">css3</div>
+                <div class="code-name">&amp;#xeb76;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">Ruby语言</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xec1c;</span>
                 <div class="name">rust</div>
@@ -228,9 +252,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1688142699712') format('woff2'),
+  src: url('iconfont.woff2?t=1688227003995') format('woff2'),
-       url('iconfont.woff?t=1688142699712') format('woff'),
+       url('iconfont.woff?t=1688227003995') format('woff'),
-       url('iconfont.ttf?t=1688142699712') format('truetype');
+       url('iconfont.ttf?t=1688227003995') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -256,6 +280,42 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont el-ico-aliphp"></span>
+            <div class="name">
+              php
+            </div>
+            <div class="code-name">.el-ico-aliphp
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-ico-alijiqixuexi___"></span>
+            <div class="name">
+              机器学习
+            </div>
+            <div class="code-name">.el-ico-alijiqixuexi___
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-ico-alicss3"></span>
+            <div class="name">
+              css3
+            </div>
+            <div class="code-name">.el-ico-alicss3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-ico-aliRubyyuyan"></span>
+            <div class="name">
+              Ruby语言
+            </div>
+            <div class="code-name">.el-ico-aliRubyyuyan
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont el-ico-alirust"></span>
             <div class="name">
@@ -517,6 +577,38 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-ico-aliphp"></use>
+                </svg>
+                <div class="name">php</div>
+                <div class="code-name">#el-ico-aliphp</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-ico-alijiqixuexi___"></use>
+                </svg>
+                <div class="name">机器学习</div>
+                <div class="code-name">#el-ico-alijiqixuexi___</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-ico-alicss3"></use>
+                </svg>
+                <div class="name">css3</div>
+                <div class="code-name">#el-ico-alicss3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-ico-aliRubyyuyan"></use>
+                </svg>
+                <div class="name">Ruby语言</div>
+                <div class="code-name">#el-ico-aliRubyyuyan</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#el-ico-alirust"></use>

src/assets/icon/iconfont.css

@@ -1,8 +1,18 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4146468 */
-  src: url('iconfont.woff2?t=1688142699712') format('woff2'),
+  src: url('iconfont.woff2?t=1688227003995') format('woff2'),
-       url('iconfont.woff?t=1688142699712') format('woff'),
+       url('iconfont.woff?t=1688227003995') format('woff'),
-       url('iconfont.ttf?t=1688142699712') format('truetype');
+       url('iconfont.ttf?t=1688227003995') format('truetype');
+}
+
+[class^="el-ico-ali"], [class*=" el-ico-ali"]/*这里有空格*/
+
+{
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .iconfont {
@@ -12,14 +22,21 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-[class^="el-ico-ali"], [class*=" el-ico-ali"]/*这里有空格*/
 
-{
+.el-ico-aliphp:before {
-  font-family: "iconfont" !important;
+  content: "\ec50";
-  font-size: 16px;
+}
-  font-style: normal;
+
-  -webkit-font-smoothing: antialiased;
+.el-ico-alijiqixuexi___:before {
-  -moz-osx-font-smoothing: grayscale;
+  content: "\e601";
+}
+
+.el-ico-alicss3:before {
+  content: "\eb76";
+}
+
+.el-ico-aliRubyyuyan:before {
+  content: "\e61d";
 }
 
 .el-ico-alirust:before {

src/assets/icon/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "el-ico-ali",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "15378684",
+      "name": "php",
+      "font_class": "php",
+      "unicode": "ec50",
+      "unicode_decimal": 60496
+    },
+    {
+      "icon_id": "10033408",
+      "name": "机器学习",
+      "font_class": "jiqixuexi___",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "15378279",
+      "name": "css3",
+      "font_class": "css3",
+      "unicode": "eb76",
+      "unicode_decimal": 60278
+    },
+    {
+      "icon_id": "20784475",
+      "name": "Ruby语言",
+      "font_class": "Rubyyuyan",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
     {
       "icon_id": "27365258",
       "name": "rust",

src/components/Home/Header.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import SearchInput from "@/components/SearchInput.vue";
+import SearchInput from "@/components/Home/SearchInput.vue";
 
 export default {
     name: "HeaderComponent",

src/components/Home/Home.vue

@@ -9,18 +9,20 @@
                         <span><i class="el-icon-menu"></i> 热门标签</span>
                     </div>
                     <div class="bottom clearfix">
-                        <el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange">
+                        <el-scrollbar style="height:50vh">
-                            <el-tab-pane  v-for="(tag,index) in tags" :key="index" :index="index" :name="tag.name" >
+                        <el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange" lazy>
-                                <span slot="label" style="text-align: center"  v-html="tag.icon"></span>
+                            <el-tab-pane  v-for="(tag,index) in tags" :key="index" :index="tag.categoryId" :name="tag.categoryName" >
+                                <span slot="label" style="border-radius: 10px;align-items: center;display: flex;flex-direction: row;justify-content: flex-start" v-html="tag.category"></span>
                             </el-tab-pane>
                         </el-tabs>
+                        </el-scrollbar>
 <!--                        <div v-for="(tag,index) in tags" :key="index" class="text item">-->
 <!--&lt;!&ndash;                            <el-tag style="margin-top: 10px" type="success" v-html="tag"></el-tag>&ndash;&gt;-->
 <!--                        </div>-->
                         <div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
                         <div>
                             <i class="el-icon-setting"></i>
-                            <el-button type="text" class="button">管理标签</el-button>
+                            <el-button type="text" class="button" @click="manageCategoryVisible=true">管理标签</el-button>
                         </div>
                     </div>
                 </el-card>
@@ -201,6 +203,17 @@
                     </el-form>
                 </div>
             </el-dialog>
+
+
+            <!--管理标签弹框-->
+            <el-dialog
+                :visible.sync="manageCategoryVisible"
+                width="50vw">
+                <div>
+                    <ManageCategory></ManageCategory>
+                </div>
+            </el-dialog>
+
         </el-main>
     </el-container>
 </template>
@@ -208,11 +221,13 @@
 <script>
 import axios from 'axios'
 import Vue from "vue";
-import ProjectList from "@/components/ProjectList.vue";
+import ProjectList from "@/components/Home/ProjectList.vue";
+import manageCategory from "@/components/Home/ManageCategory.vue";
+import ManageCategory from "@/components/Home/ManageCategory.vue";
 
 export default {
     name: "HomeComponent",
-    components: {ProjectList},
+    components: {ManageCategory, ProjectList},
     data() {
         return {
             activeName: 'first',
@@ -224,6 +239,7 @@ export default {
             loading: false,
             loginDialogVisible: false,
             registerDialogVisible: false,
+            manageCategoryVisible:false,
             imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
             checked: false,
             passwordVisible: "password",
@@ -247,38 +263,13 @@ export default {
                 password: [{required: true, message: "请输入密码", trigger: "blur"}],
                 code: [{required: true, message: "请输入验证码", trigger: "blur"}],
             },
-            // tags:['<i class="el-icon-discover"></i> 综 合',
+            tags:null,
-            //     '<i class="el-ico-alicyuyan"></i> C++',
-            //     '<i class="el-ico-aliPython"></i> python',
-            //     `<i class="el-ico-alijava"></i> java`,
-            //     `<i class="el-ico-alicyuyan"></i> C`,
-            //     `<i class="el-ico-alioutline-java-script"></i> javaScript`,
-            //     `<i class="el-ico-alicaishichang-"></i> 教 程`,
-            //     ],
-            tags:[
-                {
-                    icon: `<i class="el-icon-discover"></i> 综 合`,
-                    name:"综合"
-                },
-                {
-                    icon: `<i class="el-ico-alicyuyan"></i> C`,
-                    name:"C"
-                },
-                {
-                    icon: `<i class="el-ico-aliGoyuyan"></i> C#`,
-                    name:"C#"
-                },
-                {
-                    icon: `<i class="el-ico-alicyuyan"></i> C++`,
-                    name:"C++"
-                },
-            ],
-
         };
     },
     mounted() {
         this.account(); //获取cookie的方法
         this.ProjectLists();
+        this.categoryList();
     },
     created() {
     //     if (sessionStorage.getItem('current_name') == null){
@@ -294,6 +285,9 @@ export default {
     //     next()
     },
     computed: {
+        manageCategory() {
+            return manageCategory
+        },
         noMore() {
             return this.count >= 10
         },
@@ -514,7 +508,7 @@ export default {
                 that.projectLists=res.data;
             });
         },
-        projectListsByCount(index){
+        projectListsByCount(index,name){
             var that=this;
             axios({
                 method: 'post',
@@ -523,6 +517,7 @@ export default {
                 // URL 中的查询参数
                 params: {
                     num: index,
+                    name:name
                 }
             }).then((res)=>{
                 // console.log(res.data);
@@ -532,23 +527,21 @@ export default {
         tabChange(tab) {
             if(tab.name=="first"){
                 if(this.currentTabIndex!=null){
-                    this. typeChangeFun(this.currentTabIndex);
+                    this.typeChangeFun(this.currentTabIndex,this.currentTabName);
                 }else {
                     this.ProjectLists();
                 }
-
-
             }
             if (tab.name == "second") {
                 if(this.currentTabIndex!=null){
-                    this.projectListsByCount(this.currentTabIndex);
+                    this.projectListsByCount(this.currentTabIndex,this.currentTabName);
                 }else {
                     this.projectListsByCount(this.tabindex);
                 }
             }
         },
 
-        typeChangeFun(index){
+        typeChangeFun(index,name){
             var that=this;
             axios({
                 method: 'post',
@@ -557,6 +550,7 @@ export default {
                 // URL 中的查询参数
                 params: {
                     num: index,
+                    name:name
                 }
             }).then((res)=>{
                 console.log(res.data);
@@ -567,12 +561,27 @@ export default {
         typeChange(tab){
             this.currentTabIndex=tab.index;
             if(this.activeName==="first"){
-                this.typeChangeFun(tab.index);
+                this.typeChangeFun(tab.index,this.currentTabName);
             }
             if(this.activeName==="second"){
-                this.projectListsByCount(tab.index);
+                this.projectListsByCount(tab.index,this.currentTabName);
             }
+        },
+        // 标签列表
+        categoryList(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
+                // URL 中的查询参数
+                params: {
                 }
+            }).then((res)=>{
+                console.log(res);
+                that.tags=res.data;
+            });
+        },
 
     }
 }
@@ -604,4 +613,8 @@ export default {
     background-color: #eeeeee;
 }
 
+.el-scrollbar__wrap {
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
 </style>

src/components/Home/ManageCategory.vue

@@ -0,0 +1,25 @@
+<template>
+    <el-card class="box-card">
+        <el-checkbox-group v-model="checkboxGroup" size="medium">
+            <el-checkbox label="备选项1" border></el-checkbox>
+        </el-checkbox-group>
+    </el-card>
+</template>
+
+<script>
+export default {
+    name: "ManageCategory",
+    props: {
+        tags: Object
+    },
+    data(){
+        return{
+            checkboxGroup:[],
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Home/ProjectList.vue

@@ -18,7 +18,7 @@
                     <div>
                         <div style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div>
                     </div>
-                    <el-tag size="mini" style="margin-left: 5px">{{projectLists.categoryName}}</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
+                    <el-tag size="mini" style="margin-left: 5px" v-html="projectLists.categoryName"></el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
                     <div style="margin-left: 10px">
                         <span style="color: rgb(156 163 175); ">{{ formatTime }}</span>
                     </div>