数据结构优化

2026-01-20 11:12:01 +08:00
parent b088ba48be
commit 4aa757082b
9 changed files with 519 additions and 51 deletions
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,43 +1,51 @@
 <template>
-  <div class="min-h-screen bg-art-bg text-art-text">
+  <div class="min-h-screen bg-art-bg text-art-text relative overflow-hidden">
+    <!-- Star Background (Only for frontend) -->
+    <!-- Removed the gradient background div to keep original theme color -->
+    <StarBackground v-if="!isAdminOrLogin" class="z-0" />
+
    <!-- Global Noise (Only for frontend) -->
+    <!-- z-index 提高到 60 保持在最上层 -->
    <div v-if="!isAdminOrLogin" class="fixed inset-0 pointer-events-none z-[60] bg-noise opacity-30 mix-blend-overlay"></div>
-    
+
    <!-- Toast Container -->
-    <div id="toast-container" class="toast-container"></div>
-    
+    <div id="toast-container" class="toast-container relative z-[70]"></div>
+
    <!-- Header (Hide on Admin & Login) -->
-    <Header v-if="!isAdminOrLogin" />
-    
+    <Header v-if="!isAdminOrLogin" class="relative z-50" />
+
    <!-- Mobile Menu (Hide on Admin & Login) -->
-    <MobileMenu v-if="!isAdminOrLogin" />
-    
+    <MobileMenu v-if="!isAdminOrLogin" class="relative z-50" />
+
    <!-- Main Content -->
    <!-- Conditional classes: Apply max-w-7xl only for frontend pages -->
+    <!-- 添加 relative z-10 确保内容浮在星星之上 -->
    <main :class="[
      isAdminOrLogin ? 'w-full h-full' : 'pt-32 pb-20 px-6 max-w-7xl mx-auto relative z-10'
    ]">
      <router-view />
    </main>
-    
+
    <!-- Footer (Hide on Admin & Login) -->
-    <Footer v-if="!isAdminOrLogin" />
-    
+    <Footer v-if="!isAdminOrLogin" class="relative z-10" />
+
    <!-- Snippet Modal (Hide on Admin & Login) -->
    <!-- SnippetModal is managed by Snippets.vue page, not here -->
-    
+
    <!-- Inquiry Modal (Hide on Admin & Login) -->
-    <InquiryModal v-if="!isAdminOrLogin" />
+    <InquiryModal v-if="!isAdminOrLogin" class="relative z-[80]" />
  </div>
 </template>

 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import Header from './components/Header.vue'
 import MobileMenu from './components/MobileMenu.vue'
 import Footer from './components/Footer.vue'
 import InquiryModal from './components/InquiryModal.vue'
+import StarBackground from './components/StarBackground.vue' // Import the new component
+import { getPublicSettings } from './services/api'

 const route = useRoute()

@@ -46,4 +54,49 @@ const isAdminOrLogin = computed(() => {
  const path = route.path
  return path.startsWith('/admin') || path === '/login'
 })
-</script>
+
+// 应用网站配置到meta标签（页面标题由路由守卫处理）
+const applySiteSettings = async () => {
+  try {
+    const settings = await getPublicSettings()
+
+    // 更新meta标签
+    const updateMetaTag = (name: string, content: string) => {
+      if (!content) return
+
+      let meta = document.querySelector(`meta[name="${name}"]`)
+      if (!meta) {
+        meta = document.createElement('meta')
+        meta.setAttribute('name', name)
+        document.head.appendChild(meta)
+      }
+      meta.setAttribute('content', content)
+    }
+
+    // 更新description
+    if (settings.site_description) {
+      updateMetaTag('description', settings.site_description)
+    }
+
+    // 更新keywords
+    if (settings.site_keywords) {
+      updateMetaTag('keywords', settings.site_keywords)
+    }
+
+    // 更新author
+    if (settings.site_author) {
+      updateMetaTag('author', settings.site_author)
+    }
+  } catch (error) {
+    console.error('Failed to load site settings:', error)
+    // 使用默认标题，不抛出错误
+  }
+}
+
+onMounted(() => {
+  // 只在非管理页面应用设置
+  if (!isAdminOrLogin.value) {
+    applySiteSettings()
+  }
+})
+</script>
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -2,7 +2,7 @@
  <header class="fixed top-0 w-full z-50 glass-nav transition-all duration-300" id="main-header">
    <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
      <div class="cursor-pointer group" @click="goTo('/')">
-        <span class="font-serif text-2xl italic tracking-wider text-white group-hover:text-art-accent transition-colors">年糕崽崽.Dev</span>
+        <span class="font-serif text-2xl italic tracking-wider text-white group-hover:text-art-accent transition-colors">{{ siteTitle || '年糕崽崽.Dev' }}</span>
      </div>
      <nav class="hidden md:flex items-center gap-10">
        <button 
@@ -73,10 +73,12 @@
 <script setup lang="ts">
 import { ref, onMounted, onUpdated, watch, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { getPublicSettings } from '../services/api'

 const router = useRouter()
 const route = useRoute()
 const activeNav = ref('home')
+const siteTitle = ref<string>('')

 const toggleMobileMenu = () => {
  const menu = document.getElementById('mobile-menu')
@@ -114,9 +116,23 @@ const refreshIcons = () => {
  }
 }

+// 获取网站配置
+const loadSiteSettings = async () => {
+  try {
+    const settings = await getPublicSettings()
+    if (settings.site_title) {
+      siteTitle.value = settings.site_title
+    }
+  } catch (error) {
+    console.error('Failed to load site settings:', error)
+    // 使用默认值，不抛出错误
+  }
+}
+
 onMounted(() => {
  updateActiveNav()
  refreshIcons()
+  loadSiteSettings()
 })

 onUpdated(() => {
--- a/client/src/components/StarBackground.vue
+++ b/client/src/components/StarBackground.vue
@@ -0,0 +1,283 @@
+<template>
+  <canvas ref="canvasRef" class="fixed inset-0 w-full h-full z-0 pointer-events-none"></canvas>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+
+// 配置参数
+const config = {
+  starCount: 150, // 星星数量
+  meteorChance: 0.005, // 流星出现概率 (每帧)
+  clickWaveColor: 'rgba(100, 200, 255, 0.4)', // 点击波纹颜色
+}
+
+// 类型定义
+interface Star {
+  x: number
+  y: number
+  radius: number
+  alpha: number
+  fadingOut: boolean
+  speed: number
+}
+
+interface Meteor {
+  x: number
+  y: number
+  length: number
+  speed: number
+  angle: number
+}
+
+interface Wave {
+  x: number
+  y: number
+  radius: number
+  alpha: number
+}
+
+interface Particle {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  life: number
+  color: string
+}
+
+let ctx: CanvasRenderingContext2D | null = null
+let animationFrameId: number
+let width = 0
+let height = 0
+
+// 状态存储
+const stars: Star[] = []
+const meteors: Meteor[] = []
+const waves: Wave[] = []
+const particles: Particle[] = []
+
+// 初始化星星
+const initStars = () => {
+  stars.length = 0
+  for (let i = 0; i < config.starCount; i++) {
+    stars.push({
+      x: Math.random() * width,
+      y: Math.random() * height,
+      radius: Math.random() * 1.5,
+      alpha: Math.random(),
+      fadingOut: Math.random() > 0.5,
+      speed: Math.random() * 0.02 + 0.005
+    })
+  }
+}
+
+// 绘制并更新星星
+const drawStars = () => {
+  if (!ctx) return
+
+  ctx.fillStyle = '#FFF'
+  stars.forEach(star => {
+    // 闪烁逻辑
+    if (star.fadingOut) {
+      star.alpha -= star.speed
+      if (star.alpha < 0) {
+        star.alpha = 0
+        star.fadingOut = false
+      }
+    } else {
+      star.alpha += star.speed
+      if (star.alpha > 1) {
+        star.alpha = 1
+        star.fadingOut = true
+      }
+    }
+
+    ctx.globalAlpha = star.alpha
+    ctx.beginPath()
+    ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2)
+    ctx.fill()
+  })
+  ctx.globalAlpha = 1
+}
+
+// 生成流星
+const spawnMeteor = () => {
+  if (Math.random() < config.meteorChance) {
+    const startX = Math.random() * width
+    // 稍微倾斜的角度
+    meteors.push({
+      x: startX,
+      y: 0,
+      length: Math.random() * 80 + 20,
+      speed: Math.random() * 10 + 5,
+      angle: Math.PI / 4 // 45度角
+    })
+  }
+}
+
+// 绘制并更新流星
+const drawMeteors = () => {
+  if (!ctx) return
+
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)'
+  ctx.lineWidth = 1.5
+
+  for (let i = meteors.length - 1; i >= 0; i--) {
+    const m = meteors[i]
+
+    // 计算尾巴终点
+    const endX = m.x - m.length * Math.cos(m.angle)
+    const endY = m.y - m.length * Math.sin(m.angle)
+
+    // 绘制流星
+    const gradient = ctx.createLinearGradient(m.x, m.y, endX, endY)
+    gradient.addColorStop(0, 'rgba(255,255,255,1)')
+    gradient.addColorStop(1, 'rgba(255,255,255,0)')
+    ctx.strokeStyle = gradient
+
+    ctx.beginPath()
+    ctx.moveTo(m.x, m.y)
+    ctx.lineTo(endX, endY)
+    ctx.stroke()
+
+    // 移动
+    m.x += m.speed * Math.cos(m.angle)
+    m.y += m.speed * Math.sin(m.angle)
+
+    // 移除出屏幕的流星
+    if (m.x > width || m.y > height) {
+      meteors.splice(i, 1)
+    }
+  }
+}
+
+// 绘制并更新波纹（点击效果）
+const drawWaves = () => {
+  if (!ctx) return
+
+  for (let i = waves.length - 1; i >= 0; i--) {
+    const w = waves[i]
+    ctx.beginPath()
+    ctx.arc(w.x, w.y, w.radius, 0, Math.PI * 2)
+    ctx.strokeStyle = config.clickWaveColor
+    ctx.globalAlpha = w.alpha
+    ctx.lineWidth = 2
+    ctx.stroke()
+    ctx.globalAlpha = 1
+
+    w.radius += 2
+    w.alpha -= 0.02
+
+    if (w.alpha <= 0) {
+      waves.splice(i, 1)
+    }
+  }
+}
+
+// 绘制并更新粒子（点击爆炸效果）
+const drawParticles = () => {
+  if (!ctx) return
+
+  for (let i = particles.length - 1; i >= 0; i--) {
+    const p = particles[i]
+    ctx.fillStyle = p.color
+    ctx.beginPath()
+    ctx.arc(p.x, p.y, Math.random() * 2, 0, Math.PI * 2)
+    ctx.fill()
+
+    p.x += p.vx
+    p.y += p.vy
+    p.life -= 0.02
+
+    if (p.life <= 0) {
+      particles.splice(i, 1)
+    }
+  }
+}
+
+// 动画主循环
+const animate = () => {
+  if (!ctx || !canvasRef.value) return
+
+  // 清空画布 (使用带有透明度的黑色可以制造拖尾效果，这里我们直接清空保持清晰)
+  ctx.clearRect(0, 0, width, height)
+
+  // 绘制层级
+  drawStars()
+  spawnMeteor()
+  drawMeteors()
+  drawWaves()
+  drawParticles()
+
+  animationFrameId = requestAnimationFrame(animate)
+}
+
+// 点击事件处理
+const handleClick = (e: MouseEvent) => {
+  // 添加扩散波纹
+  waves.push({
+    x: e.clientX,
+    y: e.clientY,
+    radius: 0,
+    alpha: 1
+  })
+
+  // 添加爆炸粒子
+  const particleCount = 8
+  for (let i = 0; i < particleCount; i++) {
+    const angle = (Math.PI * 2 / particleCount) * i
+    const speed = Math.random() * 3 + 1
+    particles.push({
+      x: e.clientX,
+      y: e.clientY,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      life: 1.0,
+      color: `rgba(200, 230, 255, ${Math.random()})`
+    })
+  }
+}
+
+// 窗口大小调整
+const handleResize = () => {
+  if (canvasRef.value) {
+    width = window.innerWidth
+    height = window.innerHeight
+    canvasRef.value.width = width
+    canvasRef.value.height = height
+    // 重新分布星星，或者只在必要时调整
+    initStars()
+  }
+}
+
+onMounted(() => {
+  if (canvasRef.value) {
+    ctx = canvasRef.value.getContext('2d')
+    handleResize()
+
+    // 初始化
+    initStars()
+    animate()
+
+    // 监听全局点击和resize
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('click', handleClick)
+  }
+})
+
+onUnmounted(() => {
+  cancelAnimationFrame(animationFrameId)
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('click', handleClick)
+})
+</script>
+
+<style scoped>
+/* 确保画布在最底层但又不影响其他背景色（如果需要混合模式可以调整） */
+canvas {
+  display: block;
+}
+</style>
--- a/client/src/pages/BlogDetail.vue
+++ b/client/src/pages/BlogDetail.vue
@@ -100,7 +100,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { fetchPost, Post } from '../services/api'
+import { fetchPost, Post, getPublicSettings } from '../services/api'
 import { useScrollAnimation } from '../composables/useScrollAnimation'

 // 引入 Markdown 解析依赖
@@ -345,6 +345,19 @@ const addCopyListeners = () => {
  })
 }

+// 更新页面标题
+const updatePageTitle = async (articleTitle: string) => {
+  try {
+    const settings = await getPublicSettings()
+    const siteTitle = settings.site_title || '年糕崽崽.Dev'
+    document.title = `${siteTitle} | ${articleTitle}`
+  } catch (error) {
+    console.error('Failed to update page title:', error)
+    // 即使获取配置失败，也更新标题
+    document.title = `年糕崽崽.Dev | ${articleTitle}`
+  }
+}
+
 const fetchBlogDetail = async () => {
  loading.value = true
  error.value = ''
@@ -352,6 +365,12 @@ const fetchBlogDetail = async () => {
    const postData = await fetchPost(postId)
    if (postData) {
      post.value = postData
+      
+      // 更新页面标题
+      if (postData.title) {
+        await updatePageTitle(postData.title)
+      }
+      
      // 初始化动画、事件监听和目录 - 在数据加载完成后
      nextTick(() => {
        setTimeout(() => {
--- a/client/src/router.ts
+++ b/client/src/router.ts
@@ -1,16 +1,65 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { getPublicSettings } from './services/api'
+
+// 缓存网站配置，避免重复获取
+let cachedSiteTitle: string | null = null
+let settingsLoaded = false
+
+// 加载网站配置
+const loadSiteTitle = async (): Promise<string> => {
+  if (cachedSiteTitle !== null) {
+    return cachedSiteTitle
+  }
+  
+  if (!settingsLoaded) {
+    settingsLoaded = true
+    try {
+      const settings = await getPublicSettings()
+      cachedSiteTitle = settings.site_title || '年糕崽崽.Dev'
+    } catch (error) {
+      console.error('Failed to load site settings:', error)
+      cachedSiteTitle = '年糕崽崽.Dev'
+    }
+  }
+  
+  return cachedSiteTitle || '年糕崽崽.Dev'
+}
+
+// 设置页面标题
+const setPageTitle = async (to: any) => {
+  const siteTitle = await loadSiteTitle()
+  const routeMeta = to.matched.find((record: any) => record.meta?.title !== undefined)
+  
+  // 如果是动态标题页面（如文章详情），先设置默认标题
+  if (routeMeta?.meta?.dynamic) {
+    // 动态标题会在组件中更新，这里先设置基础标题
+    document.title = siteTitle
+    return
+  }
+  
+  // 获取页面标题
+  const pageTitle = routeMeta?.meta?.title || ''
+  
+  // 设置完整标题
+  if (pageTitle) {
+    document.title = `${siteTitle} | ${pageTitle}`
+  } else {
+    // 首页只显示网站标题
+    document.title = siteTitle
+  }
+}

 const routes = [
-  { path: '/', name: 'home', component: () => import('./pages/Home.vue') },
-  { path: '/blog', name: 'blog', component: () => import('./pages/Blog.vue') },
-  { path: '/blog/:id', name: 'blog-detail', component: () => import('./pages/BlogDetail.vue') },
-  { path: '/columns', name: 'columns', component: () => import('./pages/Columns.vue') },
-  { path: '/columns/:id', name: 'column-detail', component: () => import('./pages/ColumnDetail.vue') },
-  { path: '/works', name: 'works', component: () => import('./pages/Works.vue') },
-  { path: '/works/:id', name: 'work-detail', component: () => import('./pages/WorkDetail.vue') },
-  { path: '/snippets', name: 'snippets', component: () => import('./pages/Snippets.vue') },
-  { path: '/services', name: 'services', component: () => import('./pages/Services.vue') },
-  { path: '/about', name: 'about', component: () => import('./pages/About.vue') },
+  { path: '/', name: 'home', component: () => import('./pages/Home.vue'), meta: { title: '' } },
+  { path: '/blog', name: 'blog', component: () => import('./pages/Blog.vue'), meta: { title: '思考' } },
+  { path: '/blog/:id', name: 'blog-detail', component: () => import('./pages/BlogDetail.vue'), meta: { title: '', dynamic: true } },
+  { path: '/columns', name: 'columns', component: () => import('./pages/Columns.vue'), meta: { title: '专栏' } },
+  { path: '/columns/:id', name: 'column-detail', component: () => import('./pages/ColumnDetail.vue'), meta: { title: '', dynamic: true } },
+  { path: '/works', name: 'works', component: () => import('./pages/Works.vue'), meta: { title: '作品' } },
+  { path: '/works/:id', name: 'work-detail', component: () => import('./pages/WorkDetail.vue'), meta: { title: '', dynamic: true } },
+  { path: '/snippets', name: 'snippets', component: () => import('./pages/Snippets.vue'), meta: { title: '代码' } },
+  { path: '/services', name: 'services', component: () => import('./pages/Services.vue'), meta: { title: '合作' } },
+  { path: '/about', name: 'about', component: () => import('./pages/About.vue'), meta: { title: '关于' } },
  // 登录路由
  { path: '/login', name: 'login', component: () => import('./pages/Login.vue') },
  
@@ -113,8 +162,8 @@ const router = createRouter({
  routes
 })

-// 路由守卫，用于保护需要认证的路由
-router.beforeEach((to, _from, next) => {
+// 路由守卫，用于保护需要认证的路由和设置页面标题
+router.beforeEach(async (to, _from, next) => {
  // 检查路由是否需要认证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查本地存储中是否有token
@@ -122,14 +171,17 @@ router.beforeEach((to, _from, next) => {
    if (!token) {
      // 没有token，重定向到登录页
      next({ name: 'login' })
-    } else {
-      // 有token，继续访问
-      next()
+      return
    }
-  } else {
-    // 不需要认证的路由，直接访问
-    next()
  }
+  
+  // 设置页面标题（非管理页面）
+  if (!to.path.startsWith('/admin') && to.path !== '/login') {
+    await setPageTitle(to)
+  }
+  
+  // 继续路由导航
+  next()
 })

 export default router
--- a/client/src/services/api.ts
+++ b/client/src/services/api.ts
@@ -1083,6 +1083,30 @@ export const deleteSetting = async (keyName: string): Promise<void> => {
  }
 }

+// 公开设置API（前端使用，无需认证）
+export interface PublicSettings {
+  site_title?: string
+  site_description?: string
+  site_author?: string
+  site_keywords?: string
+}
+
+export const getPublicSettings = async (): Promise<PublicSettings> => {
+  try {
+    const response = await fetch(`${API_BASE}/settings`)
+    if (!response.ok) {
+      const errorData = await response.json()
+      throw new Error(errorData.message || '获取网站配置失败')
+    }
+    const data = await response.json()
+    return data.result || {}
+  } catch (error) {
+    console.error('Get public settings error:', error)
+    // 返回空对象，前端使用默认值
+    return {}
+  }
+}
+
 // 操作日志API
 export const getOperationLogs = async (page: number = 1, pageSize: number = 10): Promise<PaginationResponse<OperationLog>> => {
  try {