add: frontend with Astro
This commit is contained in:
parent
f7806c6a39
commit
f585b49ee4
GPG Key ID:
56209E0CCD8420C6
@ -1,13 +1,18 @@
|
|||||||
// @ts-check
|
// @ts-check
|
||||||
import { defineConfig } from "astro/config";
|
import { defineConfig } from "astro/config";
|
||||||
|
import tailwind from "@astrojs/tailwind";
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
|
import tsconfigPaths from "vite-tsconfig-paths";
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
integrations: [tailwind()],
|
||||||
vite: {
|
vite: {
|
||||||
server: {
|
server: {
|
||||||
fs: {
|
fs: {
|
||||||
allow: [".", "../../"],
|
allow: [".", "../../"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
plugins: [tsconfigPaths(),]
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -13,6 +13,7 @@
|
|||||||
"astro": "^5.5.5",
|
"astro": "^5.5.5",
|
||||||
"autoprefixer": "^10.4.21",
|
"autoprefixer": "^10.4.21",
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"tailwindcss": "^4.0.17"
|
"tailwindcss": "^3.0.24",
|
||||||
|
"vite-tsconfig-paths": "^5.1.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +1,15 @@
|
|||||||
|
---
|
||||||
|
import "../styles/global.css";
|
||||||
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<title>CVSA 前端</title>
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Astro Basics</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
import Welcome from '../components/Welcome.astro';
|
import Welcome from '@components/Welcome.astro';
|
||||||
import Layout from '../layouts/Layout.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.
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<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",
|
"extends": "astro/tsconfigs/strict",
|
||||||
"include": [".astro/types.d.ts", "**/*"],
|
"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/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user