alikia2x/cvsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: frontend with Astro

Browse Source
This commit is contained in:
alikia2x (寒寒) 2025-03-30 03:57:21 +08:00
parent f7806c6a39
commit f585b49ee4
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
8 changed files with 87 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/frontend/astro.config.mjs
View File

@ -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(),]
},
});

3
packages/frontend/package.json
View File

@ -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"
}
}

21
packages/frontend/src/layouts/Layout.astro
View File

@ -1,22 +1,15 @@
---
import "../styles/global.css";
---
<!doctype html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Astro Basics</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CVSA 前端</title>
</head>
<body>
<slot />
</body>
</html>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>

7
packages/frontend/src/pages/index.astro
View File

@ -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';
---
<Layout>

40
packages/frontend/src/pages/song/[aid]/info.astro Normal file
View File

@ -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);
---
<Layout>
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow p-6">
<h1 class="text-2xl font-bold mb-4">视频信息: {videoAid}</h1>
<!-- 视频基本信息 -->
<div class="mb-6 p-4 border rounded-lg">
<h2 class="text-xl font-semibold mb-2">基本信息</h2>
<pre class="bg-gray-50 p-2 rounded">{JSON.stringify(videoInfo, null, 2)}</pre>
</div>
<!-- 视频快照数据 -->
<div class="p-4 border rounded-lg">
<h2 class="text-xl font-semibold mb-2">历史数据 (最新100条)</h2>
<pre class="bg-gray-50 p-2 rounded">{JSON.stringify(snapshots, null, 2)}</pre>
</div>
</div>
</Layout>

3
packages/frontend/src/styles/global.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

8
packages/frontend/tailwind.config.js Normal file
View File

@ -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: [],
};

12
packages/frontend/tsconfig.json
View File

@ -1,5 +1,15 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
"exclude": ["dist"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"],
"@utils/*": ["src/utils/*"],
"@assets/*": ["src/assets/*"],
"@styles": ["src/styles/*"]
}
}
}