feat: init

src/layout/Footer/config.ts

@@ -0,0 +1,10 @@
+export const footerList = {
+  data: [
+    {
+      id: 0,
+      name: 'Github',
+      url: 'https://github.com/LOG1997',
+      icon: 'github',
+    },
+  ],
+};

src/layout/Footer/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { footerList } from './config';
+const skip = (url: string) => {
+  window.open(url);
+};
+</script>
+<template>
+  <div class="footer-container">
+    <ul class="flex justify-center">
+      <li
+        v-for="item in footerList.data"
+        :key="item.id"
+        @click="skip(item.url)"
+        class="flex items-center gap-1 cursor-pointer"
+      >
+        <svg-icon :name="item.icon"></svg-icon>
+        <p>{{ item.name }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/layout/Header/config.ts

@@ -0,0 +1,17 @@
+export const navList = [
+    {
+        id: 0,
+        name: '首页',
+        url: 'home',
+    },
+    {
+        id: 1,
+        name: '项目',
+        url: 'project',
+    },
+    {
+        id: 2,
+        name: '关于',
+        url: 'about',
+    },
+]

src/layout/Header/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { navList } from './config';
+const skip = (url: string) => {
+  window.open(url, '_self');
+};
+</script>
+
+<template>
+    <div class="h-full header-container">
+        <div class="p-0 navbar bg-base-100">
+            <div class="navbar-start max-lg:w-full">
+                <div class="dropdown">
+                    <label tabindex="0" class="btn btn-ghost lg:hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 6h16M4 12h8m-8 6h16" />
+                        </svg>
+                    </label>
+                    <ul tabindex="0"
+                        class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 text-lg flex flex-col gap-2">
+                        <li class="cursor-pointer hover:text-gray-100 hover:bg-base-200" v-for="item in navList" :key="item.id" @click="skip(item.url)">{{ item.name }}</li>
+                    </ul>
+                </div>
+                <a class="text-xl lg:pl-12 max-lg:mx-auto" href="https://vitejs.dev" target="_blank">
+                    <img src="/vite.svg" class="logo" alt="Vite logo" />
+                </a>
+            </div>
+            <div class="hidden navbar-center lg:flex">
+                <ul class="flex gap-10 px-1 text-lg cursor-pointer menu menu-horizontal">
+                    <li class="hover:text-gray-100"  v-for="item in navList" :key="item.id" @click="skip(item.url)">{{ item.name }}</li>
+                </ul>
+        </div>
+        <div class="navbar-end max-lg:w-0">
+            <a class="btn">Button</a>
+        </div>
+    </div>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>

src/layout/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import Header from './Header/index.vue';
+import Footer from './Footer/index.vue';
+</script>
+
+<template>
+  <div class="w-screen">
+    <header class="shadow-2xl head-container h-14">
+      <Header></Header>
+    </header>
+    <main class="main-container w-screen box-content min-h-[calc(100vh-10rem)]">
+      <router-view class="main-container-content"></router-view>
+    </main>
+    <footer class="w-screen footer-container">
+      <Footer></Footer>
+    </footer>
+  </div>
+</template>
+<style scoped lang="scss">
+
+</style>