feat: message page mobile

open-isle-cli/src/components/DropdownMenu.vue

@@ -75,7 +75,7 @@ export default {
   border: 1px solid var(--normal-border-color);
   border-radius: 4px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  z-index: 10;
+  z-index: 1000;
   border-radius: 8px;
   min-width: 100px;
 }

open-isle-cli/src/components/NotificationContainer.vue

@@ -5,7 +5,7 @@
     </div>
     <slot name="actions">
       <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
-        标记为已读
+        {{ isMobile ? 'OK' : '标记为已读' }}
       </div>
       <div v-else class="has-read-button">已读</div>
     </slot>
@@ -13,11 +13,17 @@
 </template>
 
 <script>
+import { isMobile } from '../utils/screen'
 export default {
   name: 'NotificationContainer',
   props: {
     item: { type: Object, required: true },
     markRead: { type: Function, required: true }
+  },
+  setup() {
+    return {
+      isMobile
+    }
   }
 }
 </script>
@@ -37,6 +43,7 @@ export default {
   color: var(--primary-color);
   font-size: 12px;
   cursor: pointer;
+  margin-left: 10px;
 }
 
 .mark-read-button:hover {
@@ -46,4 +53,11 @@ export default {
 .has-read-button {
   font-size: 12px;
 }
+
+@media (max-width: 768px) {
+  .has-read-button {
+    display: none;
+  }
+}
+
 </style>

open-isle-cli/src/views/MessagePageView.vue

@@ -659,4 +659,10 @@ export default {
   color: var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
 }
+
+@media (max-width: 768px) {
+  .has_read_button {
+    display: none;
+  }
+}
 </style>