From f585b49ee4dcce193ae884bba58d6cb54e3b7eb3 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Sun, 30 Mar 2025 03:57:21 +0800 Subject: [PATCH] add: frontend with Astro --- packages/frontend/astro.config.mjs | 5 +++ packages/frontend/package.json | 3 +- packages/frontend/src/layouts/Layout.astro | 35 +++++++--------- packages/frontend/src/pages/index.astro | 7 +--- .../frontend/src/pages/song/[aid]/info.astro | 40 +++++++++++++++++++ packages/frontend/src/styles/global.css | 3 ++ packages/frontend/tailwind.config.js | 8 ++++ packages/frontend/tsconfig.json | 16 ++++++-- 8 files changed, 87 insertions(+), 30 deletions(-) create mode 100644 packages/frontend/src/pages/song/[aid]/info.astro create mode 100644 packages/frontend/src/styles/global.css create mode 100644 packages/frontend/tailwind.config.js diff --git a/packages/frontend/astro.config.mjs b/packages/frontend/astro.config.mjs index e6619b2..4baabd1 100644 --- a/packages/frontend/astro.config.mjs +++ b/packages/frontend/astro.config.mjs @@ -1,13 +1,18 @@ // @ts-check import { defineConfig } from "astro/config"; +import tailwind from "@astrojs/tailwind"; // https://astro.build/config +import tsconfigPaths from "vite-tsconfig-paths"; + export default defineConfig({ + integrations: [tailwind()], vite: { server: { fs: { allow: [".", "../../"], }, }, + plugins: [tsconfigPaths(),] }, }); diff --git a/packages/frontend/package.json b/packages/frontend/package.json index ed2b48a..78da34b 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -13,6 +13,7 @@ "astro": "^5.5.5", "autoprefixer": "^10.4.21", "postcss": "^8.5.3", - "tailwindcss": "^4.0.17" + "tailwindcss": "^3.0.24", + "vite-tsconfig-paths": "^5.1.4" } } diff --git a/packages/frontend/src/layouts/Layout.astro b/packages/frontend/src/layouts/Layout.astro index e455c61..9c3c39f 100644 --- a/packages/frontend/src/layouts/Layout.astro +++ b/packages/frontend/src/layouts/Layout.astro @@ -1,22 +1,15 @@ - - - - - - - - Astro Basics - - - - - +--- +import "../styles/global.css"; +--- - + + + + + + CVSA 前端 + + + + + diff --git a/packages/frontend/src/pages/index.astro b/packages/frontend/src/pages/index.astro index c04f360..2dffcbe 100644 --- a/packages/frontend/src/pages/index.astro +++ b/packages/frontend/src/pages/index.astro @@ -1,9 +1,6 @@ --- -import Welcome from '../components/Welcome.astro'; -import Layout from '../layouts/Layout.astro'; - -// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build -// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh. +import Welcome from '@components/Welcome.astro'; +import Layout from '@layouts/Layout.astro'; --- diff --git a/packages/frontend/src/pages/song/[aid]/info.astro b/packages/frontend/src/pages/song/[aid]/info.astro new file mode 100644 index 0000000..063a644 --- /dev/null +++ b/packages/frontend/src/pages/song/[aid]/info.astro @@ -0,0 +1,40 @@ +--- +import Layout from "@layouts/Layout.astro"; + +// 路由参数 +const { aid } = Astro.params; +const videoAid = Number(aid); + +// 数据库查询函数 +async function getVideoMetadata(aid: number) { + // TODO: 实现bilibili_metadata表查询 + return {}; +} + +async function getVideoSnapshots(aid: number) { + // TODO: 实现video_snapshot表查询，按created_at排序，限制100条 + return []; +} + +// 获取数据 +const videoInfo = await getVideoMetadata(videoAid); +const snapshots = await getVideoSnapshots(videoAid); +--- + + +
+

视频信息: {videoAid}

+ + +
+

基本信息

+ 
{JSON.stringify(videoInfo, null, 2)}
+
+ + +
+

历史数据 (最新100条)

+ 
{JSON.stringify(snapshots, null, 2)}
+
+
+ diff --git a/packages/frontend/src/styles/global.css b/packages/frontend/src/styles/global.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/packages/frontend/src/styles/global.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js new file mode 100644 index 0000000..b34cf45 --- /dev/null +++ b/packages/frontend/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json index a9210e6..9c3f979 100644 --- a/packages/frontend/tsconfig.json +++ b/packages/frontend/tsconfig.json @@ -1,5 +1,15 @@ { - "extends": "astro/tsconfigs/strict", - "include": [".astro/types.d.ts", "**/*"], - "exclude": ["dist"] + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"], + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@components/*": ["src/components/*"], + "@layouts/*": ["src/layouts/*"], + "@utils/*": ["src/utils/*"], + "@assets/*": ["src/assets/*"], + "@styles": ["src/styles/*"] + } + } }