fix mcp label

src/components/PlaceBlock.vue

@@ -47,6 +47,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  mcp: {
+    type: Boolean,
+    default: false,
+  },
   addAction: {
     type: Function as PropType<(param: string) => void>,
   },
@@ -318,6 +322,7 @@ const bottomApplications = computed<Application[]>(() => {
     <MessagePaper>
       <div class="message-show-header font">
         {{ place?.code }}: {{ place?.name }}
+        <span v-if="mcp" class="mcp-label">MCP</span>
         <span class="collapse-icon collapse-icon-up" @click="updateMode('show-collapse')"></span>
       </div>
       <hr class="show-hr" />
@@ -402,6 +407,7 @@ const bottomApplications = computed<Application[]>(() => {
     <MessagePaper>
       <div class="message-header font">
         {{ place?.code }}: {{ place?.name }}
+        <span v-if="mcp" class="mcp-label">MCP</span>
         <span class="collapse-icon" @click="updateMode('show')"></span>
       </div>
     </MessagePaper>
@@ -856,6 +862,17 @@ const bottomApplications = computed<Application[]>(() => {
   padding-right: 50px;
 }
 
+.mcp-label {
+  background-color: #222;
+  border-radius: 4px;
+  color: #63e2b7;
+  font-family: system-ui, sans-serif;
+  font-size: 11px;
+  margin-left: 8px;
+  padding: 2px 5px;
+  vertical-align: middle;
+}
+
 .collapse-icon {
   background-image: url('@/assets/images/collapse.png');
   background-position: center;

src/components/TeamStoryPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NButton, NConfigProvider, NFlex, NInput, NQrCode, NTag } from 'naive-ui'
+import { NButton, NConfigProvider, NFlex, NInput, NQrCode } from 'naive-ui'
 import { useMessage } from 'naive-ui'
 import { computed, nextTick, ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -288,8 +288,9 @@ useSimplePolling(() => {
       <PlaceBlock
         :place="advancedPlace.place"
         v-model:mode="advancedPlace.mode"
-        v-for="advancedPlace in story.places"
+        v-for="(advancedPlace, index) in story.places"
         v-bind:key="advancedPlace.place.code"
+        :mcp="authStore.hasRole('author') && actions[index]?.mcp"
         :addAction="addAction"
       >
       </PlaceBlock>
@@ -309,13 +310,6 @@ useSimplePolling(() => {
       </MessagePaper>
 
       <div v-if="authStore.hasRole('author') && story.places.length > 0" class="edit-panel">
-        <div v-if="actions.length > 0" class="actions-list">
-          <div class="actions-title">Ходы</div>
-          <div v-for="(action, index) in actions" :key="index" class="action-item">
-            <span>{{ index + 1 }}. {{ action.code }}</span>
-            <n-tag v-if="action.mcp" size="small" type="success">MCP</n-tag>
-          </div>
-        </div>
         <n-flex justify="end">
           <n-button @click="deleteLast">Удалить последний ход</n-button>
         </n-flex>
@@ -336,22 +330,6 @@ useSimplePolling(() => {
   z-index: -1;
 }
 
-.actions-list {
-  margin-bottom: 20px;
-}
-
-.actions-title {
-  color: #aaa;
-  margin-bottom: 8px;
-}
-
-.action-item {
-  align-items: center;
-  display: flex;
-  gap: 8px;
-  margin: 4px 0;
-}
-
 .bottom-margin {
   height: calc(100dvh - 70px - 76px);
 }