init: basic structure

src/components/BaseFooter.vue

@@ -0,0 +1,7 @@
+<template>
+  <div m="t-4" p="2" class="flex justify-center items-center" opacity="70" text="sm">
+    ©️&nbsp;<a href="https://github.com/YunYouJun/cook" target="_blank">Cook</a>
+    <div text="xs" m="x-1" i-ri-cloud-line />
+    <a href="https://www.yunyoujun.cn" target="_blank">云游君</a>
+  </div>
+</template>

src/components/Counter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  initial: number
+}>()
+
+const { count, inc, dec } = useCounter(props.initial)
+</script>
+
+<template>
+  <div>
+    {{ count }}
+    <button class="inc" @click="inc()">
+      +
+    </button>
+    <button class="dec" @click="dec()">
+      -
+    </button>
+  </div>
+</template>

src/components/Menu.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { toggleDark } from '~/composables'
+</script>
+
+<template>
+  <nav text-xl mt-6>
+    <RouterLink class="icon-btn mx-2" to="/" title="首页">
+      <div i-ri-home-2-line />
+    </RouterLink>
+
+    <button class="icon-btn mx-2 !outline-none" title="切换" @click="toggleDark()">
+      <div i="ri-sun-line dark:ri-moon-line" />
+    </button>
+
+    <RouterLink class="icon-btn mx-2" to="/about" title="关于">
+      <div i-ri-information-line />
+    </RouterLink>
+
+    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/YunYouJun/cook" target="_blank" title="GitHub">
+      <div i-ri-github-line />
+    </a>
+  </nav>
+</template>

src/components/README.md

@@ -0,0 +1,7 @@
+## Components
+
+Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
+
+### Icons
+
+You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).