mirror of
https://github.com/RhenCloud/Cloud-Home.git
synced 2026-01-22 17:39:07 +08:00
RhenCloud
6b05f7c74e
在多个组件中将 `img` 标签替换为 `NuxtImg` 标签，提升图片加载的性能和优化。例如，在 `AboutSection.vue`、`FriendsSection.vue`、`HeroSection.vue`、`ProjectsSection.vue`、`SitesSection.vue` 和 `SkillsSection.vue` 中的图片标签。 refactor(app): 扩展 `nuxt.config.ts` 配置 扩展了 `nuxt.config.ts` 配置文件中的模块配置，添加了 `@nuxt/image` 和 `@nuxt/eslint` 模块。同时，优化了 `routeRules` 配置，以支持预渲染和增量静态生成。
65 lines
2.5 KiB
Vue
65 lines
2.5 KiB
Vue
<template>
|
|
<section class="card flex flex-col gap-2.5">
|
|
<h2 class="m-0 mb-1">GitHub</h2>
|
|
<div class="mt-3">
|
|
<h3 class="m-0 mb-1">提交热力图</h3>
|
|
<p class="text-text-muted text-sm m-0 mb-3 block">我的提交热力图 · Acitivity Heatmap</p>
|
|
<NuxtImg
|
|
:src="github.heatmapUrl"
|
|
alt="GitHub Heatmap"
|
|
loading="lazy"
|
|
class="rounded-xl border border-white/10 hover:border-primary/30 transition-all duration-200"
|
|
/>
|
|
</div>
|
|
<div class="mt-3">
|
|
<h3 class="m-0 mb-1">常用语言</h3>
|
|
<p class="text-text-muted text-sm m-0 mb-3 block">我常用的语言 · Languages</p>
|
|
<ul class="list-none p-0 m-0 flex flex-col gap-2.5">
|
|
<li
|
|
v-for="lang in topLanguages"
|
|
:key="lang.name"
|
|
class="bg-white/5 border border-white/10 rounded-xl p-2.5"
|
|
>
|
|
<div class="flex items-center gap-2 font-semibold mb-1.5">
|
|
<span
|
|
class="w-2.5 h-2.5 rounded-full inline-block"
|
|
:style="{ background: colorFor(lang.name) }"
|
|
/>
|
|
<span class="text-text-primary">{{ lang.name }}</span>
|
|
<span class="text-text-muted text-sm">{{ lang.percent }}%</span>
|
|
</div>
|
|
<div class="h-2 rounded-full bg-white/5 overflow-hidden">
|
|
<span class="block h-full rounded-full transition-all duration-300" :style="barStyle(lang)" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
const props = defineProps({
|
|
github: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({ languages: [] }),
|
|
},
|
|
});
|
|
|
|
const github = props.github;
|
|
|
|
const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
|
|
|
|
const topLanguages = computed(() => (Array.isArray(github.languages) ? github.languages.slice(0, 5) : []));
|
|
|
|
const colorFor = (name) => {
|
|
const idx = github.languages.findIndex((l) => l.name === name);
|
|
return palette[(idx >= 0 ? idx : 0) % palette.length];
|
|
};
|
|
const barStyle = (lang) => ({
|
|
width: `${Math.max(8, lang.percent)}%`,
|
|
background: colorFor(lang.name),
|
|
});
|
|
</script>
|