add: frontend with Astro
This commit is contained in:
parent
f7806c6a39
commit
f585b49ee4
GPG Key ID:
56209E0CCD8420C6
@ -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(),]
|
||||
},
|
||||
});
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
---
|
||||
import "../styles/global.css";
|
||||
---
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CVSA 前端</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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
40
packages/frontend/src/pages/song/[aid]/info.astro
Normal 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
3
packages/frontend/src/styles/global.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
8
packages/frontend/tailwind.config.js
Normal file
8
packages/frontend/tailwind.config.js
Normal 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: [],
|
||||
};
|
||||
@ -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/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user