fix: 优化站点监控界面按钮重叠问题

src/types/components.d.ts

@@ -21,7 +21,10 @@ declare module 'vue' {
     NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
     NInput: typeof import('naive-ui')['NInput']
     Noise: typeof import('./../components/Noise.vue')['default']
     NPagination: typeof import('naive-ui')['NPagination']

src/views/sites-monitor/manage.vue

@@ -1,6 +1,7 @@
 <script setup lang="tsx">
 import { ref, onMounted } from 'vue'
-import { NCard, NAlert, NButton, useMessage, useModal, useDialog } from 'naive-ui'
+import { NCard, NAlert, NButton, NGrid, NGridItem, NDropdown, useMessage, useModal, useDialog } from 'naive-ui'
+import type { DropdownOption, DropdownGroupOption, DropdownDividerOption, DropdownRenderOption } from 'naive-ui'
 import { RouterLink, useRouter } from 'vue-router'
 
 import ModalData from './ModalData.vue'
@@ -123,6 +124,34 @@ const onClickDelete = (name: string) => {
   })
 }
 
+function renderIcon(icon: string) {
+  return () => {
+    return h('span', { class: icon }, {})
+  }
+}
+
+type DropdownMixedOption = DropdownOption | DropdownGroupOption | DropdownDividerOption | DropdownRenderOption
+const extOptions: DropdownMixedOption[] = [
+  {
+    label: '配置',
+    key: 'config',
+    icon: renderIcon('i-ph:gear')
+  },
+  {
+    label: '删除',
+    key: 'delete',
+    icon: renderIcon('i-ph:x')
+  }
+]
+
+const handleExtSelect = (key: string, name: string) => {
+  if (key === 'config') {
+    onClickConfig(name)
+  } else if (key === 'delete') {
+    onClickDelete(name)
+  }
+}
+
 onMounted(async () => {
   // 加载监控列表
   await refreshMonitorList()
@@ -143,29 +172,31 @@ onMounted(async () => {
           新增监控
         </NButton>
       </div>
-      <div class="grid grid-cols-5 gap-4">
-        <div class="flex" v-for="name in monitorList" :key="name">
-          <RouterLink :to="`/sites-monitor/${name}`">
-            <NButton block secondary :type="`/sites-monitor/${name}`.includes(
-              router.currentRoute.value.fullPath,
-            )
-              ? 'primary'
-              : 'default'
-              ">
-              {{ name }}</NButton>
-          </RouterLink>
-          <NButton class="ml-2" quaternary circle @click="onClickConfig(name)">
-            <template #icon>
-              <span class="i-ph:gear"></span>
-            </template>
-          </NButton>
-          <NButton quaternary circle @click="onClickDelete(name)">
-            <template #icon>
-              <span class="i-ph:x"></span>
-            </template>
-          </NButton>
-        </div>
-      </div>
+      <NGrid cols="2 600:4 900:6">
+        <NGridItem v-for="name in monitorList" :key="name">
+          <div class="flex">
+            <RouterLink :to="`/sites-monitor/${name}`">
+              <NButton class="!w-[120px]" block secondary :type="`/sites-monitor/${name}`.includes(
+                router.currentRoute.value.fullPath,
+              )
+                ? 'primary'
+                : 'default'
+                ">
+                <NEllipsis>
+                  {{ name }}
+                </NEllipsis>
+              </NButton>
+            </RouterLink>
+            <NDropdown trigger="hover" :options="extOptions" @select="(key) => handleExtSelect(key, name)">
+              <NButton text class="ml-2" quaternary circle>
+                <template #icon>
+                  <span class=" i-ph:dots-three-outline-vertical-fill"></span>
+                </template>
+              </NButton>
+            </NDropdown>
+          </div>
+        </NGridItem>
+      </NGrid>
     </NCard>
   </div>
 </template>