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:
RhenCloud
2025-12-20 23:28:38 +08:00
parent e5cd753904
commit e857204140
8 changed files with 251 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/components/content/ProseCode.vue
View File

@@ -1,75 +1,10 @@
<script setup lang="ts">
defineProps({
code: {
type: String,
default: "",
},
language: {
type: String,
default: null,
},
filename: {
type: String,
default: null,
},
highlights: {
type: Array as () => number[],
default: () => [],
},
meta: {
type: String,
default: null,
},
});
// 行内代码组件
</script>
<template>
<div
class="group relative my-6 overflow-hidden rounded-2xl border border-white/10 bg-slate-950 shadow-2xl">
<!-- 代码块头部 -->
<div
v-if="filename || language"
class="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/5">
<div class="flex items-center gap-2">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
<div class="w-3 h-3 rounded-full bg-amber-500/80"></div>
<div class="w-3 h-3 rounded-full bg-emerald-500/80"></div>
</div>
<span v-if="filename" class="ml-2 text-xs font-mono text-zinc-400">{{ filename }}</span>
</div>
<span v-if="language" class="text-[10px] font-bold uppercase tracking-widest text-zinc-500">{{
language
}}</span>
</div>
<!-- 代码内容 -->
<div class="relative">
<pre class="!m-0 !bg-transparent !p-4 overflow-x-auto custom-scrollbar"><slot /></pre>
<!-- 复制按钮 (可选实现) -->
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity">
<button
class="p-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-zinc-400 hover:text-white transition-colors">
<Icon name="heroicons:clipboard" class="w-4 h-4" />
</button>
</div>
</div>
</div>
<code
class="bg-violet-500/10 text-violet-600 dark:text-violet-400 px-1.5 py-0.5 rounded-md font-mono text-[0.9em]"
><slot
/></code>
</template>
<style scoped>
.custom-scrollbar::-webkit-scrollbar {
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
</style>

119
app/components/content/ProsePre.vue Normal file
View File

@@ -0,0 +1,119 @@
<script setup lang="ts">
const props = defineProps({
code: {
type: String,
default: "",
},
language: {
type: String,
default: null,
},
filename: {
type: String,
default: null,
},
highlights: {
type: Array as () => number[],
default: () => [],
},
meta: {
type: String,
default: null,
},
});
const { copy, copied } = useClipboard({ source: props.code });
</script>
<template>
<div
class="group relative my-6 overflow-hidden rounded-2xl border border-white/10 bg-[#282a36] shadow-2xl line-numbers">
<!-- 代码块头部 -->
<div
v-if="filename || language"
class="flex items-center justify-between px-4 py-2 bg-black/20 border-b border-white/5">
<div class="flex items-center gap-2">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-[#ff5f56] shadow-[0_0_8px_rgba(255,95,86,0.2)]"></div>
<div
class="w-3 h-3 rounded-full bg-[#ffbd2e] shadow-[0_0_8px_rgba(255,189,46,0.2)]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f] shadow-[0_0_8px_rgba(39,201,63,0.2)]"></div>
</div>
<span v-if="filename" class="ml-2 text-xs font-mono text-zinc-400 truncate max-w-[200px]">{{
filename
}}</span>
</div>
<div class="flex items-center gap-3">
<span
v-if="language"
class="text-[10px] font-bold uppercase tracking-widest text-zinc-500"
>{{ language }}</span
>
<!-- 复制按钮 -->
<button
class="p-1.5 rounded-md hover:bg-white/10 text-zinc-400 hover:text-white transition-all duration-200 active:scale-95"
:class="{ 'text-emerald-400': copied }"
@click="copy()">
<Icon :name="copied ? 'heroicons:check' : 'heroicons:clipboard'" class="w-3.5 h-3.5" />
</button>
</div>
</div>
<!-- 代码内容 -->
<div class="relative group/code">
<pre
class="!m-0 !bg-transparent !p-4 overflow-x-auto custom-scrollbar font-mono text-sm leading-relaxed selection:bg-violet-500/30"><slot /></pre>
</div>
</div>
</template>
<style scoped>
.custom-scrollbar::-webkit-scrollbar {
height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
/* 行号实现 */
.line-numbers :deep(code) {
counter-reset: step;
counter-increment: step 0;
display: grid;
min-width: 100%;
}
.line-numbers :deep(.line) {
display: inline-flex;
min-height: 1.5rem;
}
.line-numbers :deep(.line::before) {
content: counter(step);
counter-increment: step;
width: 2rem;
margin-right: 1.5rem;
display: inline-block;
text-align: right;
color: rgba(255, 255, 255, 0.15);
user-select: none;
font-size: 0.75rem;
flex-shrink: 0;
}
/* 高亮行样式 */
.line-numbers :deep(.line.highlight) {
background-color: rgba(139, 92, 246, 0.1);
margin: 0 -1rem;
padding: 0 1rem;
border-left: 2px solid #bd93f9;
width: calc(100% + 2rem);
}
</style>

2
app/components/footer/developer.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { footerData, socialLinks } from "~/data";
import { footerData } from "~/data";
</script>
<template>

18
app/pages/blogs/[blog].vue
View File

@@ -62,24 +62,6 @@ useHead({
</template>
</ContentRenderer>
</div>
<!-- 分享区域 -->
<div class="mt-16 pt-8 border-t border-white/10 dark:border-white/5">
<h3 class="text-lg font-bold text-zinc-800 dark:text-zinc-100 mb-6 flex items-center gap-2">
<Icon name="heroicons:share" class="w-5 h-5 text-violet-500" />
Share this post
</h3>
<div class="flex flex-wrap gap-3">
<SocialShare
v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
:key="network"
:network="network"
:styled="true"
:label="true"
class="!rounded-xl !bg-white/40 dark:!bg-slate-800/40 !backdrop-blur-md !border !border-white/20 dark:!border-white/5 !text-zinc-700 dark:!text-zinc-300 hover:!bg-violet-500/10 hover:!text-violet-600 transition-all duration-300"
aria-label="Share with {network}" />
</div>
</div>
</div>
<!-- 侧边目录 -->