RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Rhen Cloud
2025-12-29 00:15:20 +08:00
parent ff9b8d6a87
commit a95f624fa2
24 changed files with 405 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/main/SocialLinks.vue
View File

@@ -4,7 +4,7 @@
<template v-for="link in links" :key="link.url">
<NuxtLink
:to="link.url"
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/40 backdrop-blur-md border border-white/40 text-zinc-700 text-sm font-semibold transition-all duration-300 hover:bg-white/60 hover:border-white/60 hover:text-violet-600 hover:-translate-y-1 hover:shadow-lg dark:bg-slate-800/40 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-slate-800/60 dark:hover:text-white">
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/40 backdrop-blur-md border border-white/40 text-zinc-700 text-sm font-semibold transition-all duration-300 hover:bg-white/60 hover:border-white/60 hover-text-primary hover:-translate-y-1 hover:shadow-lg dark:bg-slate-800/40 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-slate-800/60 dark:hover:text-white">
<span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
<Icon
v-if="iconFor(link).name"

9
app/components/main/TechInfo.vue
View File

@@ -39,11 +39,8 @@ const versions = computed(() => {
<section class="py-12 px-4">
<div class="max-w-xl mx-auto">
<div class="flex items-center gap-3 mb-6">
<div class="p-2 bg-violet-500/10 rounded-lg">
<Icon
name="heroicons:cpu-chip"
size="1.5em"
class="text-violet-600 dark:text-violet-400" />
<div class="p-2 bg-primary-10 rounded-lg">
<Icon name="heroicons:cpu-chip" size="1.5em" class="text-primary" />
</div>
<h2 class="text-2xl font-bold text-zinc-800 dark:text-zinc-100 tracking-tight">技术信息</h2>
</div>
@@ -63,7 +60,7 @@ const versions = computed(() => {
<Icon
v-if="item.icon"
:name="item.icon"
class="w-4 h-4 text-zinc-400 group-hover:text-violet-500 transition-colors" />
class="w-4 h-4 text-zinc-400 group-text-primary transition-colors" />
<span class="text-zinc-800 dark:text-zinc-200 text-sm font-bold">{{
item.value
}}</span>

1
app/components/main/footer.vue
View File

@@ -88,7 +88,6 @@ const fetchHitokoto = async () => {
try {
const resp = await fetch(buildHitokotoUrl());
const data = await resp.json();
console.log(data);
quote.value = data.hitokoto || "";
from.value = data.from || "";
fromWho.value = data.from_who || "";

40
app/components/main/header.vue
View File

@@ -17,12 +17,23 @@ function isActive(path: string) {
<div class="flex justify-center px-6 container max-w-5xl mx-auto items-center h-full">
<nav class="items-center">
<div
class="inline-flex items-center gap-3 bg-white/50 dark:bg-slate-900/50 backdrop-blur-xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] border border-white/40 dark:border-white/5 rounded-full px-3 py-2 transition-all duration-300 hover:shadow-xl">
class="inline-flex items-center gap-3 bg-white/70 dark:bg-slate-900/50 backdrop-blur-xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] border border-zinc-200/50 dark:border-white/5 rounded-full px-3 py-2 transition-all duration-300 hover:shadow-xl">
<div class="hidden sm:flex items-center justify-center h-8 w-8 rounded-full bg-white/0">
<NuxtLink
to="/"
class="relative rounded-full hover:bg-violet-400/40 dark:hover:bg-violet-200/40 p-1">
<Icon name="fa-solid:cat" size="16" class="text-zinc-700 dark:text-zinc-200" />
class="relative rounded-full p-1"
:class="{
'shadow-md dark:shadow-sm dark:shadow-zinc-50 scale-105': isActive('/'),
'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive('/'),
}">
<Icon
name="fa-solid:cat"
size="16"
class="text-zinc-700 dark:text-zinc-200"
:class="{
'shadow-sm scale-105 font-bold': isActive('/'),
'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive('/'),
}" />
</NuxtLink>
</div>
@@ -30,17 +41,14 @@ function isActive(path: string) {
<li v-for="link in siteConfig.navbar.links" :key="link.path">
<NuxtLink
:to="link.path"
class="relative px-2 py-1 rounded-full transition-all duration-200 flex items-center"
class="relative px-2 py-1 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
:class="{
'bg-gradient-to-r from-violet-500/80 to-fuchsia-500/80 text-white shadow-md scale-105':
isActive(link.path),
'hover:bg-white/50 dark:hover:bg-white/10': !isActive(link.path),
'shadow-md dark:shadow-sm dark:shadow-zinc-50 scale-105 font-bold': isActive(
link.path,
),
'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive(link.path),
}">
<Icon
v-if="link.icon"
:name="link.icon"
size="16"
class="text-zinc-700 dark:text-zinc-200 mr-2" />
<Icon v-if="link.icon" :name="link.icon" size="16" class="mr-2" />
<span class="hidden sm:inline-block px-auto">{{ link.name }}</span>
<span class="sm:hidden">{{ link.name }}</span>
</NuxtLink>
@@ -54,9 +62,9 @@ function isActive(path: string) {
class="relative h-9 w-9 rounded-full bg-white/20 dark:bg-white/5 flex items-center justify-center transition-all duration-300 hover:scale-110 hover:bg-white/40 dark:hover:bg-white/10 focus:outline-none shadow-sm border border-white/20"
@click="onClick(colorMode.value === 'light' ? 'dark' : 'light')">
<Icon
name="fa-regular:sun"
name="fa-regular:moon"
size="18"
class="icon-svg transition-all duration-300 text-yellow-400"
class="icon-svg transition-all duration-300 text-zinc-700 dark:text-white-200"
:class="
colorMode.value === 'light'
? 'opacity-100 scale-100'
@@ -64,9 +72,9 @@ function isActive(path: string) {
" />
<Icon
name="fa-regular:moon"
name="fa-regular:sun"
size="18"
class="icon-svg absolute transition-all duration-300 text-indigo-200"
class="icon-svg absolute transition-all duration-300 text-yellow-400"
:class="
colorMode.value === 'dark'
? 'opacity-100 scale-100'

5
app/components/main/hero.vue
View File

@@ -11,7 +11,7 @@ import SocialLinks from "./SocialLinks.vue";
<div class="mb-8">
<div class="relative h-32 w-32 group">
<div
class="absolute inset-0 bg-gradient-to-tr from-violet-500 to-fuchsia-500 rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500"></div>
class="absolute inset-0 bg-primary-gradient rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500"></div>
<NuxtImg
:src="siteConfig.profile.avatar"
alt="avatar"
@@ -28,8 +28,7 @@ import SocialLinks from "./SocialLinks.vue";
</h1>
<div class="mt-4 flex justify-center">
<div
class="h-1 w-12 bg-gradient-to-r from-violet-500 to-fuchsia-500 rounded-full opacity-60"></div>
<div class="h-1 w-12 bg-primary-gradient-r rounded-full opacity-60"></div>
</div>
<p

11
app/components/main/recent.vue
View File

@@ -33,7 +33,6 @@ const formattedData = computed(() => {
description: articles.description || "no-description available",
image: meta.image || "/not-found.jpg",
alt: meta.alt || "no alter data available",
ogImage: meta.ogImage || "/not-found.jpg",
date: meta.date || "not-date-available",
tags: meta.tags || [],
published: meta.published || false,
@@ -57,11 +56,8 @@ useHead({
<section class="pb-10 px-4">
<div class="flex flex-row items-center justify-between pt-10 pb-6">
<div class="flex items-center space-x-3">
<div class="p-2 bg-violet-500/10 rounded-lg">
<Icon
name="mdi:star-three-points-outline"
size="1.5em"
class="text-violet-600 dark:text-violet-400" />
<div class="p-2 bg-primary-10 rounded-lg">
<Icon name="mdi:star-three-points-outline" size="1.5em" class="text-primary" />
</div>
<h2 class="text-3xl font-bold text-zinc-800 dark:text-zinc-100 tracking-tight">
Recent Posts
@@ -69,7 +65,7 @@ useHead({
</div>
<NuxtLink
to="/blogs"
class="group flex items-center gap-1 text-sm font-semibold text-violet-600 dark:text-violet-400 hover:text-violet-700 transition-colors">
class="group flex items-center gap-1 text-sm font-semibold text-primary hover-text-primary transition-colors">
查看全部文章
<Icon
name="heroicons:arrow-right-20-solid"
@@ -88,7 +84,6 @@ useHead({
:description="post.description"
:image="post.image"
:alt="post.alt"
:og-image="post.ogImage"
:tags="post.tags"
:published="post.published" />
</div>