添加没用的按钮

astro.config.mjs

@@ -1,11 +1,15 @@
 // @ts-check
 import { defineConfig } from 'astro/config'
 
-import node from '@astrojs/node';
+import node from '@astrojs/node'
+
+import svelte from '@astrojs/svelte'
 
 // https://astro.build/config
 export default defineConfig({
   adapter: node({
-    mode: 'standalone'
+    mode: 'standalone',
-  })
+  }),
-})
+
+  integrations: [svelte()],
+})

package.json

@@ -13,13 +13,16 @@
   },
   "dependencies": {
     "@astrojs/node": "^10.0.4",
-    "astro": "^6.1.0"
+    "@astrojs/svelte": "^8.0.4",
+    "astro": "^6.1.0",
+    "axios": "^1.13.6",
+    "svelte": "^5.55.0",
+    "typescript": "^5.9.3"
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^8.57.2",
-    "eslint": "^9.39.4",
+    "eslint": "^10.1.0",
     "eslint-plugin-astro": "^1.6.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
     "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1"
   }

src/assets/style.css

@@ -5,20 +5,20 @@
 
 /* == 主题色 == */
 :root {
-    color-scheme: light dark;
+  color-scheme: light dark;
 
-    --color-bg-0: light-dark(oklch(95% 0 0), oklch(30% 0.02 270));
+  --color-bg-0: light-dark(oklch(95% 0 0), oklch(30% 0.02 270));
-    --color-fg-0: light-dark(oklch(25% 0.02 270), oklch(90% 0.02 270));
+  --color-fg-0: light-dark(oklch(25% 0.02 270), oklch(90% 0.02 270));
 
-    --color-link: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
+  --color-link: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
 }
 
 /* == 页面设置 == */
 html,
 body {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
 
-    background-color: var(--color-bg-0);
+  background-color: var(--color-bg-0);
-    color: var(--color-fg-0);
+  color: var(--color-fg-0);
 }

src/components/MainpageButton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { mainpageClick, mainpageGetClick } from '../lib/apis/legacy/mainpage'
+
+  let clicks = 0
+  let clicksPending = 0
+
+  onMount(() => {
+    // 先 fetch 一次
+    mainpageGetClick().then((r) => {
+      clicks = r.data
+    })
+
+    // 添加计时器
+    let _counter = 0
+    let itv = setInterval(() => {
+      _counter++
+      if (clicksPending != 0 && _counter >= 2) {
+        _counter = 0
+
+        let _clickPending = clicksPending
+        clicks += clicksPending
+        clicksPending = 0
+
+        mainpageClick(_clickPending).then((r) => {
+          clicks = r.data
+        })
+      } else {
+        if (_counter >= 60) {
+          _counter = 0
+          mainpageGetClick().then((r) => {
+            clicks = r.data
+          })
+        }
+      }
+    }, 500)
+
+    return () => {
+      clearInterval(itv)
+    }
+  })
+
+  async function click() {
+    clicksPending += 1
+  }
+</script>
+
+<button onclick={click}>没用的按钮 | {clicks + clicksPending}</button>

src/layout/BoringLayout.astro

@@ -1,7 +1,7 @@
 ---
 /* 在博客翻新时期使用的占位 Layout，讲究的就是极简 */
 
-import BaseLayout from '../components/BaseLayout.astro'
+import BaseLayout from '../layout/BaseLayout.astro'
 
 interface Props {
   title?: string

src/lib/apis/clients.ts

@@ -0,0 +1,10 @@
+import axios from 'axios'
+
+export const legacyClient = axios.create({
+  baseURL: '/api/legacy',
+  timeout: 6000,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})

src/lib/apis/legacy/mainpage.ts

@@ -0,0 +1,9 @@
+import { legacyClient } from '../clients'
+
+export const mainpageGetClick = async () =>
+  await legacyClient.get<number>('/mainpage/get_click')
+
+export const mainpageClick = async (count: number) =>
+  await legacyClient.get<number>('/mainpage/click', {
+    params: { count },
+  })

src/pages/about.astro

@@ -1,5 +1,5 @@
 ---
-import BoringLayout from '../components/BoringLayout.astro'
+import BoringLayout from '../layout/BoringLayout.astro'
 
 const friends = [
   ['https://omega98.top', '核子的博客'],

src/pages/api/legacy/[...path].ts

@@ -0,0 +1,42 @@
+import type { APIRoute } from 'astro'
+import axios from 'axios'
+
+export const prerender = false
+export const ALL: APIRoute = async ({ params, request }) => {
+  const { path } = params
+  const legacyBaseUrl =
+    import.meta.env.LEGACY_SERVER_URL || 'https://legacy.passthem.top/api'
+
+  const targetUrl = `${legacyBaseUrl}/${path}`
+  const headers = Object.fromEntries(request.headers.entries())
+
+  delete headers['host']
+  delete headers['connection']
+
+  try {
+    const response = await axios({
+      method: request.method,
+      url: targetUrl,
+      data:
+        request.method !== 'GET'
+          ? await request.json().catch(() => null)
+          : undefined,
+      headers,
+      params: Object.fromEntries(new URL(request.url).searchParams),
+      validateStatus: () => true,
+      responseType: 'arraybuffer',
+    })
+
+    return new Response(response.data, {
+      status: response.status,
+      headers: {
+        'Content-Type': response.headers['content-type'] || 'application/json',
+      },
+    })
+  } catch (error: any) {
+    return new Response(
+      JSON.stringify({ error: 'Gateway Error', message: error.message }),
+      { status: 502 },
+    )
+  }
+}

src/pages/index.astro

@@ -1,9 +1,11 @@
 ---
-import BoringLayout from '../components/BoringLayout.astro'
+import BoringLayout from '../layout/BoringLayout.astro'
+import MainpageButton from '../components/MainpageButton.svelte'
 ---
 
 <BoringLayout>
   <h1>博客系统翻新中...</h1>
   <p>点击 <a href="https://legacy.passthem.top">这里</a> 查看旧版博客</p>
   <p>或者了解更多 <a href="/about">关于这里</a></p>
+  <p><MainpageButton client:only /></p>
 </BoringLayout>

svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte'
+
+export default {
+  preprocess: vitePreprocess(),
+}