add collapse item

src/components/GameWindow.vue

@@ -17,6 +17,8 @@ type Action = {
   name: string
   text: string
   applications: Application[]
+
+  isOpen: boolean
 }
 
 type Team = {
@@ -72,8 +74,16 @@ function getTeam() {
       return res
     })
     .then(data => {
+      const oldActions = team.value.actions
+
       team.value = data
       const newActions = team.value?.actions
+      newActions.forEach(item => {
+        item.isOpen = true
+      })
+      for (let i = 0; i < actions.value.length; i++) {
+        newActions[i].isOpen = oldActions[i].isOpen
+      }
       if (actions.value.length !== newActions?.length) {
         actions.value = newActions
       }
@@ -216,7 +226,10 @@ onMounted(() => {
             <div class="message-cloud">
               <div class="message-header">
                 {{ action.place }}: {{ action.name }}
+                <span class="collapse-icon" @click="action.isOpen = !action.isOpen" style="float: right;">{{
+                  action.isOpen ? '−' : '+' }}</span>
               </div>
+              <div v-show="action.isOpen">
                 <hr class="hr" />
                 <div class="message-content">
                   {{ action.text }}
@@ -230,6 +243,7 @@ onMounted(() => {
           </div>
         </div>
       </div>
+    </div>
 
   </div>
 
@@ -326,4 +340,9 @@ body {
   text-align: center;
   width: 200px;
 }
+
+.collapse-icon {
+  padding: 0 15px;
+  cursor: pointer;
+}
 </style>