项目页面复选按钮

src/js/request.js

@@ -515,6 +515,23 @@ const projectGet =(token) => {
     })
 }
 
+
+/**
+ * 展示全部消息
+ *
+ */
+const messageGetAll = (token) => {
+    return axios({
+        url:api + "/message/get/all",
+        method:"get",
+        headers:{
+            'Authorization':'Bearer '+token,
+            'Timestamp': getCurrentTimestamp()
+        }
+    })
+}
+
+
 export default {
     login,
     register,
@@ -548,6 +565,10 @@ export default {
     infoEditSettingHeaderImage,
 
 
-    projectGet
+    projectGet,
+
+
+
+    messageGetAll
 
 }

src/views/ProjectPage/ProjectCard.vue

@@ -2,12 +2,36 @@
     <div class="relative h-full bg-gray-50 flex">
         <div class="mt-12">
             <nav class="ml-16 flex space-x-72">
-                <ul class="flex space-x-24">
+              <div class="inline-flex rounded-md shadow-sm" role="group">
-                    <li class="hover:text-blue-500">全部</li>
+                <button
-                    <li class="hover:text-blue-500">Web</li>
+                    :class="buttonClass('DisableSelection')"
-                    <li class="hover:text-blue-500">Ai</li>
+                    type="button"
-                    <li class="hover:text-blue-500">App</li>
+                    @click="toggleSelectionDisabled"
-                </ul>
+                >
+                 全部
+                </button>
+                <button
+                    :class="buttonClass('web')"
+                    type="button"
+                    @click="toggleSelection('web')"
+                >
+                 Web
+                </button>
+                <button
+                    :class="buttonClass('Ai')"
+                    type="button"
+                    @click="toggleSelection('Ai')"
+                >
+                  Ai
+                </button>
+                <button
+                    :class="buttonClass('App')"
+                    type="button"
+                    @click="toggleSelection('App')"
+                >
+                App
+                </button>
+              </div>
                 <ul class="flex space-x-12 ">
                     <a-checkbox>未开始</a-checkbox>
                     <a-checkbox>进行中</a-checkbox>
@@ -72,4 +96,41 @@ function  getAllProject(){
 
     })
 }
+
+const selectedButtons = ref([]);
+const selectionDisabled = ref(false);
+
+
+//选择全部按钮，其他按钮不可选
+const toggleSelectionDisabled = () => {
+  selectionDisabled.value = !selectionDisabled.value;
+  if (selectionDisabled.value) {
+    // 清空选中的按钮
+    selectedButtons.value = [];
+  }
+};
+
+const toggleSelection = (button) => {
+  // 如果禁止选择，直接返回
+  if (selectionDisabled.value) {
+    return;
+  }
+
+  //选择其他按钮
+  const index = selectedButtons.value.indexOf(button);
+  if (index > -1) {
+    selectedButtons.value.splice(index, 1); // 如果已选中，再次点击时移除
+  } else {
+    selectedButtons.value.push(button); // 如果未选中，点击时添加
+  }
+};
+
+
+//设置复选按钮样式
+const buttonClass = (button) => ({
+  'px-4 py-2 text-sm font-medium border focus:z-10 focus:ring-2': true,
+  'text-gray-900 bg-white border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-blue-700 focus:text-blue-700 ':  (!selectedButtons.value.includes(button) && !selectionDisabled.value) || (button === 'DisableSelection' && !selectionDisabled.value),
+  'bg-green-400 text-white': selectedButtons.value.includes(button) || (button === 'DisableSelection' && selectionDisabled.value), // 选中状态的样式
+});
+
 </script>

src/views/WorkLoadPage/Message.vue

@@ -29,12 +29,12 @@
       <div class="w-[1000px]">
         <table class="w-full text-sm text-left rtl:text-right text-gray-500">
           <tbody>
-          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <tr v-for="(message, index) in messages" :key="index" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
             <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
-             小明老师
+              {{ message.uid }}
             </th>
             <td class="px-6 py-4">
-              时间
+              {{ message.createdAt }}
             </td>
             <td class="px-6 py-4 flex justify-end">
               <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
@@ -48,7 +48,7 @@
               时间
             </td>
             <td class="px-6 py-4 flex justify-end">
-              <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
+              <a-button class="flex justify-center items-center" type="link" @click="deleteMessage(message.id)"><DeleteOutlined />删除</a-button>
             </td>
           </tr>
           <tr class=" bg-white border-b dark:bg-gray-800 dark:border-gray-700">
@@ -65,19 +65,43 @@
           </tbody>
         </table>
       </div>
-
     </div>
-
-
   </div>
 
 </template>
 <script setup>
-import {reactive, ref, watch} from 'vue';
+import {onMounted, reactive, ref, watch} from 'vue';
 import {DeleteOutlined} from '@ant-design/icons-vue';
+import request from "@/js/request.js";
 
 const selectedKeys = ref(['1']);
 const openKeys = ref(['sub1']);
+const token = window.localStorage.getItem('token')
+const messages = ref([]); // 使用ref创建响应式数据
+
+
+onMounted(() =>{
+  messageGetAll();
+})
+
+function messageGetAll() {
+  request.messageGetAll(token).then((res) => {
+    // 假设返回的res是你想要的数据数组
+    messages.value = res.data.data; // 更新messages
+  }).catch(error => {
+    console.error("Failed to fetch messages:", error);
+  });
+}
+
+const deleteMessage = (messageId) => {
+  // 这里调用后端接口删除消息
+  console.log("Deleting message with id:", messageId);
+  // 假设删除成功，从messages中移除这条消息
+  messages.value = messages.value.filter(message => message.id !== messageId);
+};
+
+
+
 function getItem(label, key, icon, children, type) {
   return {
     key,