From ac9513e651e6b106bc590a37787dd895ac9e7b15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Thu, 14 Mar 2024 15:20:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=A4=B4=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomeComponents/NavBar.vue | 160 +++++++++++-----
 src/js/request.js                        |   1 -
 src/views/ProjectPage/ProjectCard.vue    | 225 +++++++++++++++--------
 3 files changed, 267 insertions(+), 119 deletions(-)

diff --git a/src/components/HomeComponents/NavBar.vue b/src/components/HomeComponents/NavBar.vue
index 319c778..bbe9c05 100644
--- a/src/components/HomeComponents/NavBar.vue
+++ b/src/components/HomeComponents/NavBar.vue
@@ -71,62 +71,136 @@
         </a>
       </div>
       </div>
-      <div id="navbar-dropdown" class="w-full md:block md:w-auto">
-        <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
-          <li>
-            <a  aria-current="page" id="home"  class=" nav-link block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/"  onclick="changeColor('home')">
-              首页
-            </a>
 
-          </li>
-          <li>
-            <a id="project" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" onclick="changeColor('projects')">
-              项目
-            </a>
-          </li>
-          <li class="relative">
-            <button id="about" class="  nav-link flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto" data-dropdown-toggle="dropdownNavbar" @click="changeColor('about')">
-              关于
-              <svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
-                <path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-              </svg>
-            </button>
-            <!-- Dropdown menu -->
-            <div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
-              <ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">
-                <li>
-                  <a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>
-                </li>
-                <li>
-                  <a class="block px-4 py-2 hover:bg-gray-1 00" href="#">加入我们</a>
-                </li>
-                <li>
-                  <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>
-                </li>
-              </ul>
-            </div>
-          </li>
-          <li>
-            <a  id="team" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#" @click="changeColor('team')">团队</a>
-          </li>
-          <li>
-            <a id="new" class="  nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/New" @click="changeColor('new')">新闻</a>
-          </li>
-        </ul>
-      </div>
+<!--      <div id="navbar-dropdown" class="w-full md:block md:w-auto">-->
+<!--        <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">-->
+<!--          <li>-->
+<!--            <a  aria-current="page" id="home"  class=" nav-link block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/"  onclick="changeColor('home')">-->
+<!--              首页-->
+<!--            </a>-->
+
+<!--          </li>-->
+<!--          <li>-->
+<!--            <a id="project" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" onclick="changeColor('projects')">-->
+<!--              项目-->
+<!--            </a>-->
+<!--          </li>-->
+<!--          <li class="relative">-->
+<!--            <button id="about" class="  nav-link flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto" data-dropdown-toggle="dropdownNavbar" @click="changeColor('about')">-->
+<!--              关于-->
+<!--              <svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">-->
+<!--                <path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
+<!--              </svg>-->
+<!--            </button>-->
+<!--            &lt;!&ndash; Dropdown menu &ndash;&gt;-->
+<!--            <div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">-->
+<!--              <ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">-->
+<!--                <li>-->
+<!--                  <a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>-->
+<!--                </li>-->
+<!--                <li>-->
+<!--                  <a class="block px-4 py-2 hover:bg-gray-1 00" href="#">加入我们</a>-->
+<!--                </li>-->
+<!--                <li>-->
+<!--                  <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>-->
+<!--                </li>-->
+<!--              </ul>-->
+<!--            </div>-->
+<!--          </li>-->
+<!--          <li>-->
+<!--            <a  id="team" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#" @click="changeColor('team')">团队</a>-->
+<!--          </li>-->
+<!--          <li>-->
+<!--            <a id="new" class="  nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/New" @click="changeColor('new')">新闻</a>-->
+<!--          </li>-->
+<!--        </ul>-->
+<!--      </div>-->
+        <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
     </div>
   </nav>
 
 
 
 </template>
+
 <script setup>
-import {onMounted, ref} from "vue";
+import {h, onMounted, ref} from "vue";
 import requests from "../../js/request.js";
 import {message} from "ant-design-vue";
 import {useRouter} from "vue-router";
 import {BellOutlined, MailOutlined, MessageOutlined, ToolOutlined, UserOutlined} from '@ant-design/icons-vue';
 
+
+const items = ref([
+    {
+        key: 'mail',
+        // label: '首页',
+        title: '首页',
+        label: h(
+            'a',
+            {
+                onClick: () =>{
+                    router.push('/')
+                    updateCurrent('mail')
+                }
+            },
+            '首页',
+        ),
+
+    },
+    {
+        key: 'app',
+        label: h(
+            'a',
+            {
+                onClick: () => {
+                    router.push('/Project')
+                    updateCurrent('app')
+                  }
+
+            },
+            '项目',
+        ),
+        title: '项目',
+    },
+    {
+        key: 'sub1',
+        label: '关于',
+        title: '关于',
+        children: [
+            {
+                label: '关于我们',
+                key: 'setting:1',
+            },
+            {
+                label: '加入我们',
+                key: 'setting:2',
+            },
+            {
+                label: '项目合作',
+                key: 'setting:3',
+            },
+        ],
+},
+    {
+        key: 'alipay',
+        title: '团队',
+        label: '团队'
+    },
+    {
+        key: 'new',
+        title: '新闻',
+        label: '新闻',}
+
+]);
+const appValue = current[0].key; // 使用点号访问属性
+const current = ref();
+// 传对应key给current但是没用怎么回事
+function updateCurrent(key) {
+    current.value = [key];
+    console.log('6666',current.value)
+
+}
 const router = useRouter()
 const closable = ref(false)
 const isDropdownOpen  = ref(false);
diff --git a/src/js/request.js b/src/js/request.js
index 4754304..54eaa4a 100644
--- a/src/js/request.js
+++ b/src/js/request.js
@@ -659,6 +659,5 @@ export default {
 
     messageGet,
 
-    getTagsProjectList
 
 }
\ No newline at end of file
diff --git a/src/views/ProjectPage/ProjectCard.vue b/src/views/ProjectPage/ProjectCard.vue
index 214c5f5..e863307 100644
--- a/src/views/ProjectPage/ProjectCard.vue
+++ b/src/views/ProjectPage/ProjectCard.vue
@@ -2,86 +2,112 @@
     <div class="relative h-full bg-gray-50 flex w-[100vw]">
         <div class="mt-12">
             <nav class="ml-16 flex space-x-[30vw]">
-              <div class="inline-flex rounded-md " role="group">
-                  <button
+<!--              <div class="inline-flex rounded-md " role="group">-->
+<!--                  <button-->
 
-                          type="button"
-                          @click="toggleSelectionDisabled"
-                          class="w-[8vw] rounded-lg "
-                          :class="buttonClass('DisableSelection')"
-                  >
-                      全部
-                  </button>
-                <button
-                    :class="buttonClass('web')"
-                    type="button"
-                    @click="toggleSelection('web')"
-                    class="w-[6vw] rounded-lg"
-                >
-                 Web
-                </button>
-                <button
-                    :class="buttonClass('Ai')"
-                    type="button"
-                    @click="toggleSelection('Ai')"
-                    class="w-[6vw] rounded-lg"
-                >
-                  Ai
-                </button>
-                <button
-                    :class="buttonClass('App')"
-                    type="button"
-                    @click="toggleSelection('App')"
-                    class="w-[6vw] rounded-lg  "
-                >
-                App
-                </button>
-                  <button
-                          :class="buttonClass('大数据')"
-                          type="button"
-                          @click="toggleSelection('大数据')"
-                          class="w-[6vw] rounded-lg "
-                  >
-                      大数据
-                  </button>
-              </div>
-                <div class="flex space-x-12">
-                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">
-                        <input
-                                type="checkbox"
-                                class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"
-                                v-model="selectedStatus.weikaishi"
-                        />
-                        <span class="text-sm">未开始</span>
-                    </label>
+<!--                          type="button"-->
+<!--                          @click="toggleSelectionDisabled"-->
+<!--                          class="w-[8vw] rounded-lg "-->
+<!--                          :class="buttonClass('DisableSelection')"-->
+<!--                  >-->
+<!--                      全部-->
+<!--                  </button>-->
+<!--                <button-->
+<!--                    :class="buttonClass('web')"-->
+<!--                    type="button"-->
+<!--                    @click="toggleSelection('web')"-->
+<!--                    class="w-[6vw] rounded-lg"-->
+<!--                >-->
+<!--                 Web-->
+<!--                </button>-->
+<!--                <button-->
+<!--                    :class="buttonClass('Ai')"-->
+<!--                    type="button"-->
+<!--                    @click="toggleSelection('Ai')"-->
+<!--                    class="w-[6vw] rounded-lg"-->
+<!--                >-->
+<!--                  Ai-->
+<!--                </button>-->
+<!--                <button-->
+<!--                    :class="buttonClass('App')"-->
+<!--                    type="button"-->
+<!--                    @click="toggleSelection('App')"-->
+<!--                    class="w-[6vw] rounded-lg  "-->
+<!--                >-->
+<!--                App-->
+<!--                </button>-->
+<!--                  <button-->
+<!--                          :class="buttonClass('大数据')"-->
+<!--                          type="button"-->
+<!--                          @click="toggleSelection('大数据')"-->
+<!--                          class="w-[6vw] rounded-lg "-->
+<!--                  >-->
+<!--                      大数据-->
+<!--                  </button>-->
+<!--              </div>-->
 
-                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">
-                        <input
-                                type="checkbox"
-                                class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"
-                                v-model="selectedStatus.jinxingzhong"
-                        />
-                        <span class="text-sm">进行中</span>
-                    </label>
 
-                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">
-                        <input
-                                type="checkbox"
-                                class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"
-                                v-model="selectedStatus.yiwancheng"
-                        />
-                        <span class="text-sm">已完成</span>
-                    </label>
+                <div class="flex flex-row justify-between">
+                    <div>
+                        <!-- 第一个是 全部 所以独立出来 -->
+                        <a-checkable-tag
+                                v-model:checked="tagAll"
+                                @change="checked => handleClickAll(checked)"
 
-                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">
-                        <input
-                                type="checkbox"
-                                class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "
-                                v-model="selectedStatus.stop"
-                        />
-                        <span class="text-sm ">暂停</span>
-                    </label>
+                        >
+                            全部
+                        </a-checkable-tag>
+                        <a-checkable-tag
+                                v-for="(tag, index) in tagsData"
+                                :key="tag.id"
+                                v-model:checked="selectTags[index]"
+                                @change="checked => handleChange(tag, checked)"
+                        >
+                            {{ tag.name }}
+                        </a-checkable-tag>
+                    </div>
+                    <div>
+                        <a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
+                    </div>
                 </div>
+
+<!--                <div class="flex space-x-12">-->
+<!--                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
+<!--                        <input-->
+<!--                                type="checkbox"-->
+<!--                                class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"-->
+<!--                                v-model="selectedStatus.weikaishi"-->
+<!--                        />-->
+<!--                        <span class="text-sm">未开始</span>-->
+<!--                    </label>-->
+
+<!--                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
+<!--                        <input-->
+<!--                                type="checkbox"-->
+<!--                                class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"-->
+<!--                                v-model="selectedStatus.jinxingzhong"-->
+<!--                        />-->
+<!--                        <span class="text-sm">进行中</span>-->
+<!--                    </label>-->
+
+<!--                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
+<!--                        <input-->
+<!--                                type="checkbox"-->
+<!--                                class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"-->
+<!--                                v-model="selectedStatus.yiwancheng"-->
+<!--                        />-->
+<!--                        <span class="text-sm">已完成</span>-->
+<!--                    </label>-->
+
+<!--                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
+<!--                        <input-->
+<!--                                type="checkbox"-->
+<!--                                class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "-->
+<!--                                v-model="selectedStatus.stop"-->
+<!--                        />-->
+<!--                        <span class="text-sm ">暂停</span>-->
+<!--                    </label>-->
+<!--                </div>-->
             </nav>
 
             <div class="flex flex-wrap   mt-5 w-full">
@@ -134,6 +160,10 @@ watch(current1, () => {
     console.log('current', current1.value);
 });
 onMounted(() =>{
+    request.getTagsProjectList(token).then(res=>{
+        console.log(res.data.data)
+        tagsData.value=res.data.data
+    })
     getAllProject()
 })
 function  getAllProject(){
@@ -145,7 +175,52 @@ function  getAllProject(){
     })
 }
 
+const tagsData = ref([]);
+const selectTags = ref([false, false, false, false]);
 
+const projStatus = ref();
+const tagAll=ref(true)
+
+const token = window.localStorage.getItem('token')
+
+const projList=ref([])
+
+
+
+//当选中全部时，其他的都不选中
+const handleClickAll=(checked)=>{
+    if(checked){
+        selectTags.value.forEach((item,index)=>{
+            selectTags.value[index]=false
+        })
+        // 发送获取全部数据的请求
+        request.projectGetCustom(selectedTagNames.value).then(res=>{
+            console.log(res.data.data)
+        })
+    }
+
+}
+const  selectedTagNames =ref([])
+// 当选中其他的时候， 全部 不选中
+const handleChange = (tag, checked) => {
+    if(checked){
+        tagAll.value=false
+        // selectedTagNames.value.push(tag.name=''); // 将项目名称添加到数组中
+    }
+    else{
+        let flag=true
+        selectTags.value.forEach((item,index)=>{
+            if(item){
+                flag=false
+                // selectedTagNames.value.push(tag.name); // 将项目名称添加到数组中
+            }
+        })
+        if(flag){
+            tagAll.value=true
+            // selectedTagNames.value.splice(index, 1); // 从数组中移除项目名称
+        }
+    }
+};
 
 //选择全部按钮，其他按钮不可选
 const toggleSelectionDisabled = () => {