feat: add dashboard with basic auth logic.

.npmrc

@@ -1 +1,2 @@
-shamefully-hoist=true
+shamefully-hoist=true
+strict-peer-dependencies=false

.vscode/settings.json

@@ -20,5 +20,13 @@
   },
   "editor.wordWrap": "on",
   "prettier.requireConfig": true,
-  "eslint.useFlatConfig": true
+  "eslint.useFlatConfig": true,
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
+  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "ui"]
 }

app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'dodger-blue',
+    gray: 'cool',
+  },
+});

app.vue

@@ -3,10 +3,16 @@
 
   <NuxtLayout>
     <NuxtPage />
+    <Toaster
+      rich-colors
+      position="top-center"
+    />
   </NuxtLayout>
 </template>
 
 <script setup>
+  import { Toaster } from 'vue-sonner';
+
   const { t } = useI18n();
 
   useSeoMeta({

components/login/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <UiCustomCard
+    class="mt-[30vh] flex flex-col items-center justify-center space-y-10"
+  >
+    <h1 class="text-center text-2xl font-semibold">登录</h1>
+    <form
+      class="mx-10 flex flex-col"
+      @submit.prevent="handleSubmit"
+    >
+      <UInput
+        v-model="token"
+        type="password"
+        placeholder="输入你的登录 Token"
+        variant="outline"
+        class="w-full rounded-md bg-light-background p-6 px-4 py-2 dark:bg-dark-background"
+        size="xl"
+        required
+        padded
+      />
+      <button
+        type="submit"
+        class="mx-auto mt-10 rounded-md bg-tiaBlue px-10 py-2 text-light-foreground hover:bg-tiaBlue-dark dark:bg-tiaPink dark:text-dark-foreground dark:hover:bg-tiaPink-dark"
+      >
+        登录
+      </button>
+    </form>
+  </UiCustomCard>
+</template>
+
+<script lang="ts" setup>
+  import { toast } from 'vue-sonner';
+
+  const token = ref('');
+
+  const handleSubmit = async () => {
+    if (token.value.trim()) {
+      const response = await fetch('/api/auth', {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${token.value}`,
+        },
+      });
+      console.info(response);
+      if (response.ok) {
+        toast.success('登录成功');
+        localStorage.setItem('tiaAuthToken', token.value);
+        navigateTo('/dash');
+      } else {
+        toast.error('密码错误');
+      }
+    }
+  };
+</script>

components/pages/EventList.vue

@@ -4,7 +4,7 @@
       v-if="loading"
       class="grid flex-shrink flex-grow auto-rows-min grid-cols-1 justify-items-center gap-6 md:grid-cols-2 lg:grid-cols-3"
     >
-      <UiCard
+      <UiCustomCard
         v-for="index in 6"
         :key="'loading-' + index"
         class="w-full text-start"
@@ -30,13 +30,13 @@
         <div
           class="event-content mt-4 h-6 w-full rounded bg-gray-200 dark:bg-gray-800"
         />
-      </UiCard>
+      </UiCustomCard>
     </div>
     <div
       v-else
       class="grid flex-shrink flex-grow auto-rows-min grid-cols-1 justify-items-center gap-6 md:grid-cols-2 lg:grid-cols-3"
     >
-      <UiCard
+      <UiCustomCard
         v-for="event in events"
         :key="event.id"
         class="w-full text-start"
@@ -108,7 +108,7 @@
             name="heroicons:chevron-down"
           />
         </button>
-      </UiCard>
+      </UiCustomCard>
     </div>
   </div>
 </template>

components/pages/SocialLinks.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiCard custom-class="text-center w-full md:flex-1">
+  <UiCustomCard custom-class="text-center w-full md:flex-1">
     <h2 class="mb-4 text-center text-2xl font-bold md:mb-7">
       {{ $t('contact') }}
     </h2>
@@ -22,7 +22,7 @@
         </span>
       </NuxtLink>
     </div>
-  </UiCard>
+  </UiCustomCard>
 </template>
 
 <script lang="ts" setup>

layouts/default.vue

@@ -2,8 +2,8 @@
   <div
     class="flex min-h-screen flex-col bg-light-background text-light-foreground dark:bg-dark-background dark:text-dark-foreground"
   >
-    <UiProgressBar />
-    <UiBackToTop />
+    <LayoutProgressBar />
+    <LayoutBackToTop />
 
     <LayoutSiteHeader />
     <main class="container mx-auto max-w-7xl flex-grow px-4 py-8">

middleware/auth.global.ts

@@ -0,0 +1,36 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  if (to.path.startsWith('/dash') && to.path !== '/dash/login') {
+    const isValidToken = await validateToken();
+    if (!isValidToken) {
+      window.localStorage.removeItem('tiaAuthToken');
+      return navigateTo('/dash/login');
+    }
+  } else if (to.path === '/dash/login') {
+    const isValidToken = await validateToken();
+    if (isValidToken) {
+      return navigateTo('/dash');
+    } else {
+      window.localStorage.removeItem('tiaAuthToken');
+    }
+  }
+});
+
+const validateToken = async () => {
+  const token = window.localStorage.getItem('tiaAuthToken');
+  if (!token) {
+    return false;
+  }
+
+  try {
+    const response = await fetch('/api/auth', {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    return response.ok;
+  } catch (error) {
+    console.error('Token validation failed:', error);
+    return false;
+  }
+};

nuxt.config.ts

@@ -2,7 +2,6 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },
-  css: ['~/assets/css/main.css'],
   app: {
     head: {
       link: [
@@ -34,13 +33,23 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxt/eslint',
     '@nuxt/fonts',
-    '@nuxtjs/tailwindcss',
-    '@nuxt/icon',
     '@nuxtjs/i18n',
     '@nuxtjs/seo',
     'nitro-cloudflare-dev',
     '@nuxthub/core',
+    '@nuxt/ui',
   ],
+  routeRules: {
+    '/': {
+      prerender: true,
+    },
+    '/dash/**': {
+      ssr: false,
+    },
+  },
+  ui: {
+    global: true,
+  },
   hub: {
     kv: true,
   },
@@ -80,4 +89,7 @@ export default defineNuxtConfig({
       ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
     },
   },
+  runtimeConfig: {
+    tiaAuthToken: 'token',
+  },
 });

package.json

@@ -15,19 +15,20 @@
   },
   "dependencies": {
     "@nuxt/fonts": "^0.10.2",
-    "@nuxt/icon": "^1.8.2",
     "@nuxt/image": "^1.8.1",
+    "@nuxt/ui": "2.19.2",
     "@nuxtjs/i18n": "^9.1.0",
     "@nuxtjs/seo": "^2.0.2",
     "nuxt": "^3.14.1592",
     "vue": "latest",
-    "vue-router": "latest"
+    "vue-router": "latest",
+    "vue-sonner": "^1.3.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20241127.0",
+    "@iconify-json/mdi": "^1.2.1",
     "@nuxt/eslint": "^0.7.2",
     "@nuxthub/core": "^0.8.7",
-    "@nuxtjs/tailwindcss": "^6.12.2",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@zl-asica/prettier-config": "^1.0.9",
     "autoprefixer": "^10.4.20",
@@ -38,7 +39,6 @@
     "postcss": "^8.4.49",
     "prettier": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.6.9",
-    "tailwindcss": "^3.4.15",
     "typescript": "~5.6",
     "vue-tsc": "^2.1.10",
     "wrangler": "^3.91.0"
@@ -52,5 +52,5 @@
       "prettier --write"
     ]
   },
-  "packageManager": "[email protected].2"
+  "packageManager": "[email protected].3"
 }

pages/dash/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <UiCustomCard class="mx-auto w-full space-y-10 p-10">
+    <h1>活动列表</h1>
+    <h3 class="mt-10">开发中...</h3>
+    <UTable
+      :rows="data"
+      :columns="columnNames"
+      class="text-start"
+    />
+  </UiCustomCard>
+</template>
+
+<script lang="ts" setup>
+  useSeoMeta({
+    title: '管理后台',
+  });
+
+  useHead({
+    meta: [
+      {
+        name: 'robots',
+        content: 'noindex nofollow',
+      },
+    ],
+  });
+
+  const response = await fetch('/api/events');
+  const events: TiAEvents[] = await response.json();
+  const data = events.map((event: TiAEvents) => ({
+    // map event properties to TableRow properties
+    // example:
+    id: event.id,
+    time: new Date(event.time as unknown as string).toLocaleString(),
+    name: event.title,
+    lang: Array.isArray(event.lang) ? event.lang.map((l) => l).join(', ') : '',
+  }));
+
+  const columnNames = [
+    { key: 'id', name: 'ID', label: 'ID' },
+    { key: 'time', name: 'time', label: '时间' },
+    { key: 'name', name: 'name', label: '名称' },
+    { key: 'lang', name: 'lang', label: '语言' },
+  ];
+</script>

pages/dash/login.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex h-full items-center justify-center">
+    <Login />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  useSeoMeta({
+    title: '登录',
+  });
+
+  useHead({
+    meta: [
+      {
+        name: 'robots',
+        content: 'noindex nofollow',
+      },
+    ],
+  });
+</script>

pages/index.vue

@@ -5,11 +5,11 @@
         <h1 class="mb-6 ml-4 text-tiaBlue">
           {{ $t('nuxtSiteConfig.name') }}
         </h1>
-        <UiCard custom-class="md:flex-1 text-start">
+        <UiCustomCard custom-class="md:flex-1 text-start">
           <p>
             {{ $t('nuxtSiteConfig.description') }}
           </p>
-        </UiCard>
+        </UiCustomCard>
       </div>
 
       <SocialLinks />