From f6a7dd8750e36caaf7c65baaacedb6357b762374 Mon Sep 17 00:00:00 2001
From: webfansplz <webfansplz@gmail.com>
Date: Tue, 19 Dec 2023 21:36:12 +0800
Subject: [PATCH] chore: update docs

---
 docs/.vitepress/components/UseModeList.vue | 48 ++++++++++++++++++++++
 docs/guide/getting-started.md              |  4 +-
 docs/public/features/chrome-logo.svg       |  1 +
 docs/public/features/electron-logo.svg     |  1 +
 docs/public/features/vite-logo.svg         | 15 +++++++
 5 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 docs/.vitepress/components/UseModeList.vue
 create mode 100644 docs/public/features/chrome-logo.svg
 create mode 100644 docs/public/features/electron-logo.svg
 create mode 100644 docs/public/features/vite-logo.svg

diff --git a/docs/.vitepress/components/UseModeList.vue b/docs/.vitepress/components/UseModeList.vue
new file mode 100644
index 00000000..746a8788
--- /dev/null
+++ b/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>
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index a2ac97a2..4475bf94 100644
--- a/docs/guide/getting-started.md
+++ b/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 -->
 
diff --git a/docs/public/features/chrome-logo.svg b/docs/public/features/chrome-logo.svg
new file mode 100644
index 00000000..c40feec7
--- /dev/null
+++ b/docs/public/features/chrome-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1 1 176 176"><style><![CDATA[.B{clip-path:url(#C)}.C{fill:#3e2723}.D{fill-opacity:.15}.E{fill-opacity:.2}]]></style><defs><circle id="A" cx="96" cy="96" r="88"/><path id="B" d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z"/></defs><clipPath id="C"><use xlink:href="#A"/></clipPath><g class="B" transform="translate(-7 -7)"><path d="M21.97 8v108h39.4L96 56h88V8z" fill="#db4437"/><linearGradient id="D" x1="29.34" x2="81.84" y1="75.02" y2="44.35" gradientUnits="userSpaceOnUse"><stop stop-color="#a52714" stop-opacity=".6" offset="0"/><stop stop-color="#a52714" stop-opacity="0" offset=".66"/></linearGradient><path d="M21.97 8v108h39.4L96 56h88V8z" fill="url(#D)"/><path d="M62.3 115.6L22.48 47.3l-.58 1 39.54 67.8z" class="C D"/><use xlink:href="#B" fill="#0f9d58"/><linearGradient id="E" x1="110.9" x2="52.54" y1="164.5" y2="130.3" gradientUnits="userSpaceOnUse"><stop stop-color="#055524" stop-opacity=".4" offset="0"/><stop stop-color="#055524" stop-opacity="0" offset=".33"/></linearGradient><path d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z" fill="url(#E)"/><path d="M129.8 117.3l-.83-.48-38.4 67.15h1.15l38.1-66.64z" fill="#263238" class="D"/><defs><path id="F" d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z"/></defs><clipPath id="G"><use xlink:href="#F"/></clipPath><g clip-path="url(#G)"><path d="M96 56l34.65 60-38.88 68H184V56z" fill="#ffcd40"/><linearGradient id="H" x1="121.9" x2="136.6" y1="49.8" y2="114.1" gradientUnits="userSpaceOnUse"><stop stop-color="#ea6100" stop-opacity=".3" offset="0"/><stop stop-color="#ea6100" stop-opacity="0" offset=".66"/></linearGradient><path d="M96 56l34.65 60-38.88 68H184V56z" fill="url(#H)"/></g><path d="M96 56l34.65 60-38.88 68H184V56z" fill="#ffcd40"/><path d="M96 56l34.65 60-38.88 68H184V56z" fill="url(#H)"/><defs><path id="I" d="M96 56l34.65 60-38.88 68H184V56z"/></defs><clipPath id="J"><use xlink:href="#I"/></clipPath><g clip-path="url(#J)"><path d="M21.97 8v108h39.4L96 56h88V8z" fill="#db4437"/><path d="M21.97 8v108h39.4L96 56h88V8z" fill="url(#D)"/></g></g><radialGradient id="K" cx="668.2" cy="55.95" r="84.08" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#3e2723" stop-opacity=".2" offset="0"/><stop stop-color="#3e2723" stop-opacity="0" offset="1"/></radialGradient><g transform="translate(-7 -7)"><path d="M96 56v20.95L174.4 56z" fill="url(#K)" class="B"/><g class="B"><defs><path id="L" d="M21.97 8v40.34L61.36 116 96 56h88V8z"/></defs><clipPath id="M"><use xlink:href="#L"/></clipPath><g clip-path="url(#M)"><use xlink:href="#B" fill="#0f9d58"/><path d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z" fill="url(#E)"/></g></g></g><radialGradient id="N" cx="597.9" cy="48.52" r="78.04" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#3e2723" stop-opacity=".2" offset="0"/><stop stop-color="#3e2723" stop-opacity="0" offset="1"/></radialGradient><path transform="translate(-7 -7)" d="M21.97 48.45l57.25 57.24L61.36 116z" fill="url(#N)" class="B"/><radialGradient id="O" cx="671.8" cy="96.14" r="87.87" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#263238" stop-opacity=".2" offset="0"/><stop stop-color="#263238" stop-opacity="0" offset="1"/></radialGradient><g transform="translate(-7 -7)"><path d="M91.83 183.9l20.96-78.2 17.86 10.3z" fill="url(#O)" class="B"/><g class="B"><circle cx="96" cy="96" r="40" fill="#f1f1f1"/><circle cx="96" cy="96" r="32" fill="#4285f4"/><path d="M96 55c-22.1 0-40 17.9-40 40v1c0-22.1 17.9-40 40-40h88v-1H96z" class="C E"/><path d="M130.6 116c-6.92 11.94-19.8 20-34.6 20-14.8 0-27.7-8.06-34.6-20h-.04L8 24.48v1L61.4 117c6.92 11.94 19.8 20 34.6 20 14.8 0 27.68-8.05 34.6-20h.05v-1h-.06z" fill="#fff" fill-opacity=".1"/><path d="M97 56c-.17 0-.33.02-.5.03C118.36 56.3 136 74.08 136 96s-17.64 39.7-39.5 39.97c.17 0 .33.03.5.03 22.1 0 40-17.9 40-40s-17.9-40-40-40z" opacity=".1" class="C"/><path d="M131 117.3c3.4-5.88 5.37-12.68 5.37-19.96a39.87 39.87 0 0 0-1.87-12.09c.95 3.42 1.5 7 1.5 10.73 0 7.28-1.97 14.08-5.37 19.96l.02.04-38.88 68h1.16L131 117.3z" fill="#fff" class="E"/><path d="M96 9c48.43 0 87.72 39.13 88 87.5 0-.17.01-.33.01-.5 0-48.6-39.4-88-88-88S8 47.4 8 96c0 .17.01.33.01.5C8.28 48.13 47.57 9 96 9z" fill="#fff" class="E"/><path d="M96 183c48.43 0 87.72-39.13 88-87.5 0 .17.01.33.01.5 0 48.6-39.4 88-88 88S8 144.6 8 96c0-.17.01-.33.01-.5.27 48.37 39.56 87.5 88 87.5z" class="C D"/></g></g></svg>
\ No newline at end of file
diff --git a/docs/public/features/electron-logo.svg b/docs/public/features/electron-logo.svg
new file mode 100644
index 00000000..dc81c99d
--- /dev/null
+++ b/docs/public/features/electron-logo.svg
@@ -0,0 +1 @@
+<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#2B2E3A" cx="128" cy="128" r="128"/><g fill="#9FEAF9" fill-rule="nonzero"><path d="M100.502 71.69c-26.005-4.736-46.567.221-54.762 14.415-6.115 10.592-4.367 24.635 4.24 39.646a2.667 2.667 0 1 0 4.626-2.653c-7.752-13.522-9.261-25.641-4.247-34.326 6.808-11.791 25.148-16.213 49.187-11.835a2.667 2.667 0 0 0 .956-5.247zm-36.999 72.307c10.515 11.555 24.176 22.394 39.756 31.388 37.723 21.78 77.883 27.601 97.675 14.106a2.667 2.667 0 1 0-3.005-4.406c-17.714 12.078-55.862 6.548-92.003-14.318-15.114-8.726-28.343-19.222-38.478-30.36a2.667 2.667 0 1 0-3.945 3.59z"/><path d="M194.62 140.753c17.028-20.116 22.973-40.348 14.795-54.512-6.017-10.423-18.738-15.926-35.645-16.146a2.667 2.667 0 0 0-.069 5.333c15.205.198 26.165 4.939 31.096 13.48 6.792 11.765 1.49 29.807-14.248 48.399a2.667 2.667 0 1 0 4.071 3.446zm-43.761-68.175c-15.396 3.299-31.784 9.749-47.522 18.835-38.942 22.483-64.345 55.636-60.817 79.675a2.667 2.667 0 1 0 5.277-.775c-3.133-21.344 20.947-52.769 58.207-74.281 15.267-8.815 31.135-15.06 45.972-18.239a2.667 2.667 0 1 0-1.117-5.215z"/><path d="M87.77 187.753c8.904 24.86 23.469 40.167 39.847 40.167 11.945 0 22.996-8.143 31.614-22.478a2.667 2.667 0 1 0-4.571-2.748c-7.745 12.883-17.258 19.892-27.043 19.892-13.605 0-26.596-13.652-34.825-36.63a2.667 2.667 0 1 0-5.021 1.797zm81.322-4.863c4.61-14.728 7.085-31.718 7.085-49.423 0-44.179-15.463-82.263-37.487-92.042a2.667 2.667 0 0 0-2.164 4.874c19.643 8.723 34.317 44.866 34.317 87.168 0 17.177-2.397 33.63-6.84 47.83a2.667 2.667 0 1 0 5.09 1.593zm50.224-2.612c0-7.049-5.714-12.763-12.763-12.763-7.049 0-12.763 5.714-12.763 12.763 0 7.049 5.714 12.763 12.763 12.763 7.049 0 12.763-5.714 12.763-12.763zm-5.333 0a7.43 7.43 0 1 1-14.86 0 7.43 7.43 0 0 1 14.86 0zM48.497 193.041c7.05 0 12.764-5.714 12.764-12.763 0-7.049-5.715-12.763-12.764-12.763-7.048 0-12.763 5.714-12.763 12.763 0 7.049 5.715 12.763 12.763 12.763zm0-5.333a7.43 7.43 0 1 1 0-14.86 7.43 7.43 0 0 1 0 14.86z"/><path d="M127.617 54.444c7.049 0 12.763-5.714 12.763-12.763 0-7.049-5.714-12.763-12.763-12.763-7.049 0-12.763 5.714-12.763 12.763 0 7.049 5.714 12.763 12.763 12.763zm0-5.333a7.43 7.43 0 1 1 0-14.86 7.43 7.43 0 0 1 0 14.86zm1.949 93.382c-4.985 1.077-9.896-2.091-10.975-7.076a9.236 9.236 0 0 1 7.076-10.976c4.985-1.077 9.896 2.091 10.976 7.076 1.077 4.985-2.091 9.897-7.077 10.976z"/></g></g></svg>
\ No newline at end of file
diff --git a/docs/public/features/vite-logo.svg b/docs/public/features/vite-logo.svg
new file mode 100644
index 00000000..de4aeddc
--- /dev/null
+++ b/docs/public/features/vite-logo.svg
@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>