chore: update docs

docs/.vitepress/components/UseModeList.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useRouter } from 'vitepress'
+
+const router = useRouter()
+const list = [
+  {
+    name: 'Vite Plugin',
+    logo: '/features/vite-logo.svg',
+    link: '/guide/vite-plugin',
+  },
+  {
+    name: 'Standalone App',
+    logo: '/features/electron-logo.svg',
+    link: '/guide/standalone',
+  },
+  {
+    name: 'Chrome Extension (Coming Soon)',
+    logo: '/features/chrome-logo.svg',
+    link: '/guide/browser-extension',
+    disabled: true,
+  },
+]
+</script>
+
+<template>
+  <ul class="flex flex-col mx-0! px-0!">
+    <li
+      v-for="(item, index) in list"
+      :key="index"
+      class="group cursor-pointer list-none rounded pr-5 hover:b-$vp-c-brand-1"
+      :class="{
+        'opacity-50': item.disabled,
+        'pointer-events-none': item.disabled,
+      }"
+      border="~ solid base" flex="~ flex-row items-center"
+    >
+      <a
+        :href="item.link"
+        class="group text-! h-full w-full flex cursor-pointer list-none items-center rounded pr-5 hover:b-$vp-c-brand-1 text-$vp-c-text-1! decoration-none!"
+      >
+        <img :src="item.logo" :alt="item.name" class="mx-2 h-10">
+        <p class="group-hover:text-$vp-c-brand-1">
+          {{ item.name }}
+        </p>
+      </a>
+    </li>
+  </ul>
+</template>

docs/guide/getting-started.md

@@ -4,9 +4,7 @@
 
 **Vue DevTools is a tool designed to enhance the Vue developer experience,** It provides some [features](/guide/features) to help you better understand your Vue application.There are several ways to use Vue DevTools in your Vue project:
 
-- **[Recommended]** [Vite Plugin](/guide/vite-plugin.md)
-- **[Coming soon]** [Browser Extension](/guide/browser-extension.md)
-- [Standalone App](/guide/standalone.md)
+<UseModeList />
 
 <!-- ## Trying Vue DevTools Online -->