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 -->