refactor(layout): 优化网页布局和路由设置

- 更新 logo显示方式,使用 import 代替直接引用
- 将 BrowserRouter 替换为 HashRouter,以适应前端路由
- 在项目中添加 logo.svg 文件,统一 logo 资源
- 调整 vite.config.ts,设置 base 为 './' 以优化构建
This commit is contained in:
黄建武
2025-05-09 09:57:13 +08:00
parent 8ed50ba662
commit 732ea0ba2b
6 changed files with 23 additions and 7 deletions

View File

@@ -2,7 +2,7 @@ import './App.css'
import { HomePage } from './pages/HomePage/Home.tsx'
import { useTaskPolling } from '@/hooks/useTaskPolling.ts'
import SettingPage from './pages/SettingPage/index.tsx'
import { BrowserRouter, Navigate, Routes } from 'react-router-dom'
import { BrowserRouter,HashRouter, Navigate, Routes } from 'react-router-dom'
import { Route } from 'react-router-dom'
import Index from '@/pages/Index.tsx'
import NotFoundPage from '@/pages/NotFoundPage' //
@@ -26,7 +26,7 @@ function App() {
]
return (
<>
<BrowserRouter>
<HashRouter>
<Routes>
<Route path="/" element={<Index />}>
<Route index element={<HomePage />} />
@@ -49,7 +49,7 @@ function App() {
<Route path="*" element={<NotFoundPage />} />
</Route>
</Routes>
</BrowserRouter>
</HashRouter>
</>
)
}

View File

@@ -0,0 +1,12 @@
<svg width="415" height="412" viewBox="0 0 415 412" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 28C0 12.536 12.536 0 28 0H387C402.464 0 415 12.536 415 28V384C415 399.464 402.464 412 387 412H28C12.536 412 0 399.464 0 384V28Z" fill="#3C77FB"/>
<rect x="60" y="64" width="296" height="283" rx="37" fill="white"/>
<path d="M268.422 175.657C276.308 180.298 276.308 191.702 268.422 196.343L186.335 244.641C178.336 249.348 168.25 243.58 168.25 234.298V137.702C168.25 128.42 178.336 122.652 186.335 127.359L268.422 175.657Z" fill="#3C77FB"/>
<path d="M17 282C17 270.954 25.9543 262 37 262H83C94.0457 262 103 270.954 103 282V282C103 293.046 94.0457 302 83 302H37C25.9543 302 17 293.046 17 282V282Z" fill="#3C77FB"/>
<path d="M38 281.5C38 274.044 44.0442 268 51.5 268H82.5C89.9558 268 96 274.044 96 281.5V281.5C96 288.956 89.9558 295 82.5 295H51.5C44.0442 295 38 288.956 38 281.5V281.5Z" fill="white"/>
<path d="M17 206C17 194.954 25.9543 186 37 186H83C94.0457 186 103 194.954 103 206V206C103 217.046 94.0457 226 83 226H37C25.9543 226 17 217.046 17 206V206Z" fill="#3C77FB"/>
<path d="M38 205.5C38 198.044 44.0442 192 51.5 192H82.5C89.9558 192 96 198.044 96 205.5V205.5C96 212.956 89.9558 219 82.5 219H51.5C44.0442 219 38 212.956 38 205.5V205.5Z" fill="white"/>
<path d="M17 130C17 118.954 25.9543 110 37 110H83C94.0457 110 103 118.954 103 130V130C103 141.046 94.0457 150 83 150H37C25.9543 150 17 141.046 17 130V130Z" fill="#3C77FB"/>
<path d="M38 129.5C38 122.044 44.0442 116 51.5 116H82.5C89.9558 116 96 122.044 96 129.5V129.5C96 136.956 89.9558 143 82.5 143H51.5C44.0442 143 38 136.956 38 129.5V129.5Z" fill="white"/>
<path d="M145 290C145 285.582 148.582 282 153 282H284C288.418 282 292 285.582 292 290V299C292 303.418 288.418 307 284 307H153C148.582 307 145 303.418 145 299V290Z" fill="#3C77FB"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -11,7 +11,7 @@ import { useState } from 'react'
import { Link } from 'react-router-dom'
import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '@/components/ui/resizable'
import {ScrollArea} from "@/components/ui/scroll-area.tsx";
import logo from '@/assets/icon.svg'
interface IProps {
NoteForm: React.ReactNode
Preview: React.ReactNode
@@ -29,7 +29,7 @@ const HomeLayout: FC<IProps> = ({ NoteForm, Preview, History }) => {
<header className="flex h-16 items-center justify-between px-6">
<div className="flex items-center gap-2">
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl">
<img src="/icon.svg" alt="logo" className="h-full w-full object-contain" />
<img src={logo} alt="logo" className="h-full w-full object-contain" />
</div>
<div className="text-2xl font-bold text-gray-800">BiliNote</div>
</div>

View File

@@ -7,6 +7,8 @@ import {
import { Link, Outlet } from 'react-router-dom'
import { SlidersHorizontal } from 'lucide-react'
import React from 'react'
import logo from '@/assets/icon.svg'
interface ISettingLayoutProps {
Menu: React.ReactNode
}
@@ -25,7 +27,7 @@ const SettingLayout = ({ Menu }: ISettingLayoutProps) => {
<header className="flex h-16 items-center justify-between px-6">
<div className="flex items-center gap-2">
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl">
<img src="/icon.svg" alt="logo" className="h-full w-full object-contain" />
<img src={logo} alt="logo" className="h-full w-full object-contain" />
</div>
<div className="text-2xl font-bold text-gray-800">BiliNote</div>
</div>

View File

@@ -4,6 +4,7 @@ import { Card, CardContent } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Github, Star, ExternalLink, Download } from 'lucide-react'
import { ScrollArea } from '@/components/ui/scroll-area.tsx'
import logo from '@/assets/icon.svg'
export default function AboutPage() {
const images = [
@@ -19,7 +20,7 @@ export default function AboutPage() {
<div className="mb-16 flex flex-col items-center justify-center text-center">
<div className="mb-4 flex items-center gap-4">
<img
src="/public/icon.svg"
src={logo}
alt="BiliNote Logo"
width={50}
height={50}

View File

@@ -11,6 +11,7 @@ export default defineConfig(({ mode }) => {
const port = env.FRONTEND_PORT || 3015
return {
base: './',
plugins: [react(), tailwindcss()],
resolve: {
alias: {