mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-03-15 02:27:29 +08:00
feat: init index page
This commit is contained in:
shinya
@@ -9,7 +9,7 @@ import {
|
||||
Plus,
|
||||
Shield,
|
||||
} from 'lucide-react';
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import Button from '@/components/buttons/Button';
|
||||
import IconButton from '@/components/buttons/IconButton';
|
||||
|
||||
59
src/app/globals.css
Normal file
59
src/app/globals.css
Normal file
@@ -0,0 +1,59 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#e6f3fb 0%,
|
||||
#eaf3f7 18%,
|
||||
#f7f7f3 38%,
|
||||
#e9ecef 60%,
|
||||
#dbe3ea 80%,
|
||||
#d3dde6 100%
|
||||
);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(31, 41, 55, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(75, 85, 99, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(107, 114, 128, 0.5);
|
||||
}
|
||||
|
||||
/* 视频卡片悬停效果 */
|
||||
.video-card-hover {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.video-card-hover:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 渐变遮罩 */
|
||||
.gradient-overlay {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.8) 100%
|
||||
);
|
||||
}
|
||||
@@ -1,52 +1,13 @@
|
||||
import { Metadata } from 'next';
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import { Inter } from 'next/font/google';
|
||||
|
||||
import '@/styles/globals.css';
|
||||
// !STARTERCONF This is for demo purposes, remove @/styles/colors.css import immediately
|
||||
import '@/styles/colors.css';
|
||||
import './globals.css';
|
||||
|
||||
import { siteConfig } from '@/constant/config';
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
// !STARTERCONF Change these default meta
|
||||
// !STARTERCONF Look at @/constant/config to change them
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(siteConfig.url),
|
||||
title: {
|
||||
default: siteConfig.title,
|
||||
template: `%s | ${siteConfig.title}`,
|
||||
},
|
||||
description: siteConfig.description,
|
||||
robots: { index: true, follow: true },
|
||||
// !STARTERCONF this is the default favicon, you can generate your own from https://realfavicongenerator.net/
|
||||
// ! copy to /favicon folder
|
||||
icons: {
|
||||
icon: '/favicon/favicon.ico',
|
||||
shortcut: '/favicon/favicon-16x16.png',
|
||||
apple: '/favicon/apple-touch-icon.png',
|
||||
},
|
||||
manifest: `/favicon/site.webmanifest`,
|
||||
openGraph: {
|
||||
url: siteConfig.url,
|
||||
title: siteConfig.title,
|
||||
description: siteConfig.description,
|
||||
siteName: siteConfig.title,
|
||||
images: [`${siteConfig.url}/images/og.jpg`],
|
||||
type: 'website',
|
||||
locale: 'en_US',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: siteConfig.title,
|
||||
description: siteConfig.description,
|
||||
images: [`${siteConfig.url}/images/og.jpg`],
|
||||
// creator: '@th_clarence',
|
||||
},
|
||||
// authors: [
|
||||
// {
|
||||
// name: 'Theodorus Clarence',
|
||||
// url: 'https://theodorusclarence.com',
|
||||
// },
|
||||
// ],
|
||||
title: '聚合视频站',
|
||||
description: '一个聚合多个视频源的现代化视频网站',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -55,8 +16,10 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html>
|
||||
<body>{children}</body>
|
||||
<html lang='zh-CN'>
|
||||
<body className={`${inter.className} min-h-screen text-gray-900`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
180
src/app/page.tsx
180
src/app/page.tsx
@@ -1,72 +1,130 @@
|
||||
'use client';
|
||||
|
||||
import Head from 'next/head';
|
||||
import * as React from 'react';
|
||||
import '@/lib/env';
|
||||
import { useState } from 'react';
|
||||
|
||||
import ArrowLink from '@/components/links/ArrowLink';
|
||||
import ButtonLink from '@/components/links/ButtonLink';
|
||||
import UnderlineLink from '@/components/links/UnderlineLink';
|
||||
import UnstyledLink from '@/components/links/UnstyledLink';
|
||||
import CapsuleSwitch from '@/components/CapsuleSwitch';
|
||||
import Sidebar from '@/components/layout/Sidebar';
|
||||
import SearchCard from '@/components/video/SearchCard';
|
||||
import VideoCard from '@/components/video/VideoCard';
|
||||
|
||||
/**
|
||||
* SVGR Support
|
||||
* Caveat: No React Props Type.
|
||||
*
|
||||
* You can override the next-env if the type is important to you
|
||||
* @see https://stackoverflow.com/questions/68103844/how-to-override-next-js-svg-module-declaration
|
||||
*/
|
||||
import Logo from '~/svg/Logo.svg';
|
||||
const defaultPoster =
|
||||
'https://vip.dytt-img.com/upload/vod/20250326-1/9857e2e8581f231e24747ee32e633a3b.jpg';
|
||||
|
||||
// !STARTERCONF -> Select !STARTERCONF and CMD + SHIFT + F
|
||||
// Before you begin editing, follow all comments with `STARTERCONF`,
|
||||
// to customize the default configuration.
|
||||
// 模拟数据
|
||||
const mockData = {
|
||||
recentMovies: [
|
||||
{
|
||||
id: 1,
|
||||
title: '流浪地球2',
|
||||
poster: defaultPoster,
|
||||
rating: 8.3,
|
||||
type: 'movie' as const,
|
||||
source: '电影天堂',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '满江红',
|
||||
poster: defaultPoster,
|
||||
rating: 7.5,
|
||||
type: 'movie' as const,
|
||||
source: '电影天堂',
|
||||
},
|
||||
],
|
||||
recentTvShows: [
|
||||
{
|
||||
id: 3,
|
||||
title: '三体',
|
||||
poster: defaultPoster,
|
||||
rating: 8.7,
|
||||
type: 'tv' as const,
|
||||
episodes: 30,
|
||||
source: '电影天堂',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '狂飙',
|
||||
poster: defaultPoster,
|
||||
rating: 8.5,
|
||||
type: 'tv' as const,
|
||||
episodes: 39,
|
||||
source: '电影天堂',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('home'); // 'home' 或 'favorites'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main>
|
||||
<Head>
|
||||
<title>Hi</title>
|
||||
</Head>
|
||||
<section className='bg-white'>
|
||||
<div className='layout relative flex min-h-screen flex-col items-center justify-center py-12 text-center'>
|
||||
<Logo className='w-16' />
|
||||
<h1 className='mt-4'>Next.js + Tailwind CSS + TypeScript Starter</h1>
|
||||
<p className='mt-2 text-sm text-gray-800'>
|
||||
A starter for Next.js, Tailwind CSS, and TypeScript with Absolute
|
||||
Import, Seo, Link component, pre-configured with Husky{' '}
|
||||
</p>
|
||||
<p className='mt-2 text-sm text-gray-700'>
|
||||
<ArrowLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter'>
|
||||
See the repository
|
||||
</ArrowLink>
|
||||
</p>
|
||||
<div className='flex min-h-screen'>
|
||||
<Sidebar onToggle={setSidebarCollapsed} />
|
||||
|
||||
<ButtonLink className='mt-6' href='/components' variant='light'>
|
||||
See all components
|
||||
</ButtonLink>
|
||||
|
||||
<UnstyledLink
|
||||
href='https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftheodorusclarence%2Fts-nextjs-tailwind-starter'
|
||||
className='mt-4'
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
width='92'
|
||||
height='32'
|
||||
src='https://vercel.com/button'
|
||||
alt='Deploy with Vercel'
|
||||
/>
|
||||
</UnstyledLink>
|
||||
|
||||
<footer className='absolute bottom-2 text-gray-700'>
|
||||
© {new Date().getFullYear()} By{' '}
|
||||
<UnderlineLink href='https://theodorusclarence.com?ref=tsnextstarter'>
|
||||
Theodorus Clarence
|
||||
</UnderlineLink>
|
||||
</footer>
|
||||
<main
|
||||
className={`flex-1 px-10 py-8 transition-all duration-300 ${
|
||||
sidebarCollapsed ? 'ml-16' : 'ml-64'
|
||||
}`}
|
||||
>
|
||||
{/* 顶部 Tab 切换 */}
|
||||
<div className='mb-8 flex justify-center'>
|
||||
<CapsuleSwitch
|
||||
options={[
|
||||
{ label: '首页', value: 'home' },
|
||||
{ label: '收藏夹', value: 'favorites' },
|
||||
]}
|
||||
active={activeTab}
|
||||
onChange={setActiveTab}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* 继续观看 */}
|
||||
<section className='mb-12'>
|
||||
<h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
|
||||
继续观看
|
||||
</h2>
|
||||
<div className='flex space-x-8 overflow-x-auto pb-2'>
|
||||
{[...mockData.recentMovies, ...mockData.recentTvShows]
|
||||
.slice(0, 4)
|
||||
.map((item) => (
|
||||
<div key={item.id} className='min-w-[192px] w-48'>
|
||||
<VideoCard
|
||||
{...item}
|
||||
showProgress={true}
|
||||
progress={Math.random() * 100}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 最新电影 */}
|
||||
<section className='mb-12'>
|
||||
<h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
|
||||
最新电影
|
||||
</h2>
|
||||
<div className='grid grid-cols-5 gap-8'>
|
||||
{mockData.recentMovies.map((movie) => (
|
||||
<div key={movie.id} className='w-48'>
|
||||
<SearchCard {...movie} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 最新电视剧 */}
|
||||
<section className='mb-12'>
|
||||
<h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
|
||||
最新电视剧
|
||||
</h2>
|
||||
<div className='grid grid-cols-5 gap-8'>
|
||||
{mockData.recentTvShows.map((show) => (
|
||||
<div key={show.id} className='w-48'>
|
||||
<SearchCard {...show} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user