升级依赖

README.md

@@ -1,3 +1,9 @@
 # cooperation
 
 协作工具
+
+```bash
+# 安装依赖(使用镜像站)
+npm i --registry=https://registry.npmmirror.com
+
+```

package.json

@@ -8,20 +8,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.8.3",
+    "core-js": "^3.39.0",
     "primeicons": "^7.0.0",
     "pug": "^3.0.3",
     "pug-plain-loader": "^1.1.0",
-    "vue": "^3.2.13"
+    "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@babel/core": "^7.26.0",
-    "@babel/eslint-parser": "^7.12.16",
+    "@babel/eslint-parser": "^7.25.9",
-    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-service": "~5.0.8",
-    "eslint": "^7.32.0",
+    "eslint": "^9.16.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vue": "^9.32.0",
     "vue-cli-plugin-windicss": "~1.1.6"
   }
 }

src/App.vue

@@ -14,12 +14,8 @@
       </div>
       <div class="mt-6">
         <ul class="bg-white rounded-xl flex bg-opacity-20 mx-10 text-white text-xs justify-around overflow-hidden">
-          <li
+          <li v-for="item in navbar.list" :key="item" class="rounded-md cursor-pointer bg-opacity-30 py-2 px-4"
-            v-for="item in navbar.list"
+            :class="{ 'bg-white': item === navbar.active }" @click="navbar.setPage(item)">
-            :key="item" class="rounded-md cursor-pointer bg-opacity-30 py-2 px-4"
-            :class="{'bg-white': item===navbar.active }"
-            @click="navbar.setPage(item)"
-          >
             {{ item }}
           </li>
         </ul>

src/components/PageHome.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-main(class="bg-white rounded-t-xl mt-17 p-4 pt-28 shadow-gray-200 relative")
+main(class="bg-white rounded-t-xl mt-17 p-4 pt-38 shadow-gray-200 relative")
   // 功能导航
   div(class="bg-white rounded-xl shadow-md mt-6 p-6 -top-22 shadow-gray-200 w-78 absolute")
     div(class="flex flex-row gap-1")
@@ -10,16 +10,24 @@ main(class="bg-white rounded-t-xl mt-17 p-4 pt-28 shadow-gray-200 relative")
         div(class="rounded-xl bg-blue-500 h-8 w-8 flex justify-center items-center text-white")
           i.pi.pi-box
         span(class="font-sans text-xs mt-1") {{ item.name }}
-  // 我的任务
+  //// 我的任务(每个项目分为一片, 处理结果 任务详情 回执 转向)
-  div(class="rounded-md shadow-md mt-6 p-6 shadow-gray-200 bg-white" v-for="x in 2" :key="x")
+  //div(class="rounded-md shadow-md p-6 shadow-gray-200 bg-white" v-for="x in 2" :key="x")
+  //  div(class="flex flex-row flex-nowrap")
+  //    div(class="font-bold flex-1 text-sm") 项目 (待处理, 已处理(传递))
+  //    div(class="text-xs") 查看更多
+  //  div
+  //    ul
+  //      li(v-for="item in 会议" :key="item.name" class="flex mt-1" @click="click()")
+  //        span(class="font-sans text-sm pl-1 mr-2") {{ item.name }}
+  //        span(class="font-sans text-xs text-gray-300 pl-1") {{ item.time }}
+  // 任务列表
+  button(@click="任务.stretch = !任务.stretch") 展开列表
+  div(class="rounded-md shadow-md mt-6 p-6 shadow-gray-200 bg-white" v-for="item in 任务.list" :key="item.id")
     div(class="flex flex-row flex-nowrap")
-      div(class="font-bold flex-1 text-sm") 项目 (待处理, 已处理(传递))
+      div(class="font-bold flex-1 text-sm") {{ item.name }}
-      div(class="text-xs") 查看更多
+    div(v-show="任务.stretch" class="transition transition-all ease-out duration-700")
-    div
+      p 任务描述
-      ul
+
-        li(v-for="item in 会议" :key="item.name" class="flex mt-1" @click="click()")
-          span(class="font-sans text-sm pl-1 mr-2") {{ item.name }}
-          span(class="font-sans text-xs text-gray-300 pl-1") {{ item.time }}
   div(class="font-sans text-xs text-gray-300 flex items-center justify-center py-6")
     span 没有更多了..
   PageArticle(v-if="article.show")
@@ -40,6 +48,18 @@ const click = () => {
   emit('update:id', 123) //代表是将num值修改为123
 }
 
+
+const 任务 = reactive({
+  stretch: true,
+  list: [
+    { id: 1, name: '添加某功能' },
+    { id: 2, name: '处理某bug' },
+    { id: 3, name: '处理某bug' },
+    { id: 3, name: '提供某数据' },
+  ]
+})
+
+
 const article = reactive({
   show: true,
   id: 1,