mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-05-10 17:43:40 +08:00
refactor(layout): 优化网页布局和路由设置
- 更新 logo显示方式,使用 import 代替直接引用 - 将 BrowserRouter 替换为 HashRouter,以适应前端路由 - 在项目中添加 logo.svg 文件,统一 logo 资源 - 调整 vite.config.ts,设置 base 为 './' 以优化构建
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
12
BillNote_frontend/src/assets/icon.svg
Normal file
12
BillNote_frontend/src/assets/icon.svg
Normal 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 |
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -11,6 +11,7 @@ export default defineConfig(({ mode }) => {
|
||||
const port = env.FRONTEND_PORT || 3015
|
||||
|
||||
return {
|
||||
base: './',
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
|
||||
Reference in New Issue
Block a user