ui: 基本框架

layouts/default.vue

@@ -1,13 +1,96 @@
 <script setup lang="ts">
+import ModalAuthentication from "~/components/ModalAuthentication.vue";
 
+const colorMode = useColorMode()
+const dayjs = useDayjs()
+const modal = useModal()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
+const links = [
+  {
+    label: '绘画',
+    icon: 'i-tabler-brush',
+    to: '/aigc/drawing'
+  }, {
+    label: '聊天',
+    icon: 'i-tabler-message-2',
+    to: '/aigc/chat'
+  }, {
+    label: 'PPT',
+    icon: 'i-tabler-file-type-ppt',
+    to: '/aigc/ppt-course-gen'
+  }
+]
+
+const open_login_modal = () => {
+  modal.open(ModalAuthentication, {})
+}
 </script>
 
 <template>
-  <div>
-    <slot/>
+  <div class="w-full h-screen">
+    <header>
+      <h1 class="inline-flex flex-col">
+        <span class="text-lg text-neutral-600 dark:text-neutral-300 font-bold">眩生花 AI 助手</span>
+        <span class="text-xs text-neutral-600 dark:text-neutral-300">这里可以有一个副标题</span>
+      </h1>
+      <div class="hidden md:block">
+        <UHorizontalNavigation :links="links" class="select-none"/>
+      </div>
+      <div class="flex flex-row items-center gap-4">
+        <ClientOnly>
+          <UButton
+              :icon="isDark ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition' : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'"
+              color="gray"
+              variant="ghost"
+              aria-label="Theme"
+              @click="isDark = !isDark"
+          />
+          <UButton label="登录或注册" size="xs" class="font-bold" color="indigo" @click="open_login_modal"/>
+        </ClientOnly>
+        <UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
+      </div>
+    </header>
+
+    <main>
+      <slot/>
+    </main>
+
+    <footer>
+      <p class="text-sm text-neutral-500">© {{ dayjs().year() }} 重庆眩生花科技有限公司</p>
+    </footer>
   </div>
 </template>
 
-<style scoped>
+<style>
+body {
+  @apply bg-neutral-50 dark:bg-neutral-950 bg-fixed;
+  @apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')];
+}
+</style>
 
+<style scoped>
+header {
+  @apply fixed inset-x-0 h-16 bg-white border-b;
+  @apply dark:bg-neutral-900 dark:border-neutral-800;
+  @apply flex flex-row items-center justify-between px-4;
+}
+
+main {
+  @apply min-h-full pt-16;
+}
+
+footer {
+  @apply h-16 bg-white border-t;
+  @apply dark:bg-neutral-900 dark:border-neutral-800;
+  @apply flex flex-row items-center justify-between px-4;
+}
 </style>