chore: simplify ts-router folder structure

Author: haoqunjiang

template/code/typescript-router/src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import HelloWorld from '@/components/HelloWorld.vue'
-import ColorSchemeSwitch from '@/components/ColorSchemeSwitch.vue'
 </script>
 
 <template>
@@ -9,7 +8,6 @@ import ColorSchemeSwitch from '@/components/ColorSchemeSwitch.vue'
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
-      <ColorSchemeSwitch />
 
       <div id="nav">
         <router-link to="/">Home</router-link>

template/code/typescript-router/src/assets/base.css

@@ -36,16 +36,18 @@
   --section-gap: 160px;
 }
 
-[data-color-scheme='dark'] {
-  --color-background: var(--vt-c-black);
-  --color-background-soft: var(--vt-c-black-soft);
-  --color-background-mute: var(--vt-c-black-mute);
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
 
-  --color-border: var(--vt-c-divider-dark-2);
-  --color-border-hover: var(--vt-c-divider-dark-1);
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
 
-  --color-heading: var(--vt-c-text-dark-1);
-  --color-text: var(--vt-c-text-dark-2);
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
 }
 
 *,

template/code/typescript-router/src/components/ColorSchemeSwitch.vue

@@ -10,7 +10,7 @@ defineProps<{
     <h3>
       You’ve successfully created a project with
       <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://v3.vuejs.org/">Vue 3</a>.
+      <a target="_blank" href="https://v3.vuejs.org/">Vue 3</a>. What's next?
     </h3>
   </div>
 </template>

template/code/typescript-router/src/components/HelloWorld.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Widely regarded as one of the best, Vue’s
+    <a target="_blank" href="https://v3.vuejs.org/">official documentation</a>
+    will provide you with all information you need to get started. Whether you’re already a Vue
+    veteran or just trying the framework out, great chances are you’ll find the answer to your next
+    question there.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
+    setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
+    your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
+    <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
+      >Cypress Component Testing</a
+    >.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a target="_blank" href="https://next.vuex.vuejs.org/">Vuex</a>,
+    <a target="_blank" href="https://next.router.vuejs.org/">Vue Router</a>,
+    <a target="_blank" href="https://next.vue-test-utils.vuejs.org/">Vue Test Utils</a>, and
+    <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
+    resources, we suggest paying
+    <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
+    <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
+    You should also subscribe to
+    <a target="_blank" href="https://news.vuejs.org">our mailing list</a> for latest news in the Vue
+    world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a target="_blank" href="https://vuejs.org/support-vuejs/">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>