RhenCloud/Cloud-Home
1
0
Fork 0
mirror of https://github.com/RhenCloud/Cloud-Home.git synced 2026-01-22 17:39:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: 格式化代码

Browse Source
This commit is contained in:
RhenCloud
2025-12-19 19:38:01 +08:00
parent 618723a689
commit 4d8644629b
37 changed files with 6516 additions and 6200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
app/components/GithubSection.vue
View File

@@ -1,64 +1,69 @@
<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>
<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>