Merge pull request #1 from ioococ/master

重构布局并添加基本的监控和提交节点页面

README.md

@@ -26,17 +26,17 @@ See [Vite Configuration Reference](https://vite.dev/config/).
 ## Project Setup
 
 ```sh
-npm install
+pnpm install
 ```
 
 ### Compile and Hot-Reload for Development
 
 ```sh
-npm run dev
+pnpm run dev
 ```
 
 ### Type-Check, Compile and Minify for Production
 
 ```sh
-npm run build
+pnpm run build
 ```

src/App.vue

@@ -1,84 +1,70 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+const year = new Date().getFullYear()
 </script>
 
 <template>
-  <header>
+  <div class="layout">
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+    <header class="navbar bg-base-100 shadow-md">
-
+      <div class="navbar-start">
-    <div class="wrapper">
+        <div class="dropdown">
-      <HelloWorld msg="You did it!" />
+          <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-      <nav>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <RouterLink to="/">Home</RouterLink>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
-        <RouterLink to="/about">About</RouterLink>
+            </svg>
-      </nav>
+          </div>
+          <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+            <li><RouterLink to="/">主页</RouterLink></li>
+            <li><RouterLink to="/monitor">节点监控</RouterLink></li>
+            <li><RouterLink to="/submit">提交节点</RouterLink></li>
+          </ul>
+        </div>
+        <div class="flex-1">
+          <h1 class="btn btn-ghost normal-case text-2xl font-bold">EasyTierMC Uptime</h1>
+        </div>
+      </div>
+      <div class="navbar-end hidden lg:flex">
+        <ul class="menu menu-horizontal px-1 gap-2">
+          <li><RouterLink to="/" class="btn btn-ghost">主页</RouterLink></li>
+          <li><RouterLink to="/monitor" class="btn btn-ghost">节点监控</RouterLink></li>
+          <li><RouterLink to="/submit" class="btn btn-ghost">提交节点</RouterLink></li>
+        </ul>
       </div>
     </header>
-
+    <main class="flex-1">
       <RouterView />
+    </main>
+    <footer class="footer footer-center bg-base-200 text-base-content p-4 border-t">
+      <div>
+        <small>© {{ year }} EasyTierMC Uptime</small>
+      </div>
+    </footer>
+  </div>
 </template>
 
 <style scoped>
+.layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
 header {
-  line-height: 1.5;
+  flex-shrink: 0;
-  max-height: 100vh;
 }
 
-.logo {
+main {
-  display: block;
+  flex: 1;
-  margin: 0 auto 2rem;
+  padding: 1.25rem 1.5rem 2rem;
 }
 
-nav {
+footer {
-  width: 100%;
+  flex-shrink: 0;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
 }
 
 @media (min-width: 1024px) {
-  header {
+  main { 
-    display: flex;
+    padding: 1.75rem 2rem 2.5rem; 
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
   }
 }
 </style>

src/assets/base.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --vt-c-white: #ffffff;

src/assets/main.css

@@ -1,8 +1,6 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
 }
@@ -23,13 +21,9 @@ a,
 
 @media (min-width: 1024px) {
   body {
-    display: flex;
-    place-items: center;
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
 }

src/router/index.ts

@@ -10,12 +10,14 @@ const router = createRouter({
       component: HomeView,
     },
     {
-      path: '/about',
+      path: '/monitor',
-      name: 'about',
+      name: 'monitor',
-      // route level code-splitting
+      component: () => import('../views/MonitorView.vue'),
-      // this generates a separate chunk (About.[hash].js) for this route
+    },
-      // which is lazy-loaded when the route is visited.
+    {
-      component: () => import('../views/AboutView.vue'),
+      path: '/submit',
+      name: 'submit',
+      component: () => import('../views/SubmitView.vue'),
     },
   ],
 })

src/views/HomeView.vue

@@ -1,9 +1,6 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
 <template>
-  <main>
+  <section style="padding:2rem; text-align:center;">
-    <TheWelcome />
+    <h2>欢迎来到 EasyTierMC Uptime</h2>
-  </main>
+    <p>使用上方导航查看节点监控或提交新的节点。</p>
+  </section>
 </template>

src/views/MonitorView.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <h2>节点监控</h2>
+    <p>这里是节点监控页面。</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 可根据需要添加逻辑
+</script>

src/views/SubmitView.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <h2>提交节点</h2>
+    <p>这里是提交节点页面。</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 可根据需要添加逻辑
+</script>

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark"],
+  },
+}