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

style(app): 使用 NuxtImg 替代 img 标签

Browse Source 
在多个组件中将 `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` 配置，以支持预渲染和增量静态生成。
This commit is contained in:
RhenCloud
2025-12-18 22:13:47 +08:00
parent bda4281fde
commit 6b05f7c74e
21 changed files with 423 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/components/StatsSection.vue
View File

@@ -6,8 +6,11 @@
<button class="tab-button" :class="{ active: activeTab === 'github' }" @click="activeTab = 'github'">
GitHub
</button>
<button class="tab-button" :class="{ active: activeTab === 'wakatime' }"
@click="activeTab = 'wakatime'">
<button
class="tab-button"
:class="{ active: activeTab === 'wakatime' }"
@click="activeTab = 'wakatime'"
>
Wakatime
</button>
</div>
@@ -18,7 +21,7 @@
<div class="heatmap">
<h3>提交热力图</h3>
<p class="muted">我的提交热力图 · Activity Heatmap</p>
<img :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
<NuxtImg :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
</div>
<div class="lang-wrap">
<h3>常用语言</h3>
@@ -27,12 +30,12 @@
<ul class="list lang-list">
<li v-for="lang in githubLanguages" :key="lang.name" class="lang-row">
<div class="lang-label">
<span class="dot" :style="{ background: colorFor(lang.name, 'github') }"></span>
<span class="dot" :style="{ background: colorFor(lang.name, 'github') }" />
<span class="lang-name">{{ lang.name }}</span>
<span class="lang-percent">{{ lang.percent }}%</span>
</div>
<div class="lang-bar">
<span class="lang-bar-fill" :style="barStyle(lang, 'github')"></span>
<span class="lang-bar-fill" :style="barStyle(lang, 'github')" />
</div>
</li>
</ul>
@@ -67,45 +70,51 @@
</div>
</div>
<div class="lang-wrap" v-if="currentWakatimeData?.languages && currentWakatimeData.languages.length">
<div v-if="currentWakatimeData?.languages && currentWakatimeData.languages.length" class="lang-wrap">
<h3>编程语言</h3>
<p class="muted">语言使用统计 · Languages</p>
<div class="lang-chart">
<ul class="list lang-list">
<li v-for="lang in wakatimeLanguages" :key="lang.name" class="lang-row">
<div class="lang-label">
<span class="dot" :style="{ background: colorFor(lang.name, 'wakatime') }"></span>
<span class="dot" :style="{ background: colorFor(lang.name, 'wakatime') }" />
<span class="lang-name">{{ lang.name }}</span>
<span class="lang-percent">{{ lang.percent }}%</span>
</div>
<div class="lang-bar">
<span class="lang-bar-fill" :style="barStyle(lang, 'wakatime')"></span>
<span class="lang-bar-fill" :style="barStyle(lang, 'wakatime')" />
</div>
</li>
</ul>
</div>
</div>
<div class="wakatime-tabs" v-if="allTimeData">
<div v-if="allTimeData" class="wakatime-tabs">
<div class="wakatime-mini-tabs">
<button class="wakatime-tab-button" :class="{ active: wakatimeActiveTab === 'weekly' }"
@click="wakatimeActiveTab = 'weekly'">
<button
class="wakatime-tab-button"
:class="{ active: wakatimeActiveTab === 'weekly' }"
@click="wakatimeActiveTab = 'weekly'"
>
最近7天
</button>
<button class="wakatime-tab-button" :class="{ active: wakatimeActiveTab === 'allTime' }"
@click="wakatimeActiveTab = 'allTime'">
<button
class="wakatime-tab-button"
:class="{ active: wakatimeActiveTab === 'allTime' }"
@click="wakatimeActiveTab = 'allTime'"
>
所有时间
</button>
</div>
</div>
<div class="status-wrap" v-if="statusData">
<div v-if="statusData" class="status-wrap">
<h3>当前状态</h3>
<p class="muted">实时状态 · Current Status</p>
<div class="status-item">
<span class="status-indicator" :class="{ active: statusData.is_coding }"></span>
<span class="status-indicator" :class="{ active: statusData.is_coding }" />
<span class="status-text">{{ statusData.is_coding ? "正在编码" : "未在编码" }}</span>
<span class="status-project" v-if="statusData.project">{{ statusData.project }}</span>
<span v-if="statusData.project" class="status-project">{{ statusData.project }}</span>
</div>
</div>
</div>
@@ -115,7 +124,16 @@
<script setup>
import { ref, onMounted, computed } from "vue";
const props = defineProps({ github: Object, wakatime: Object });
const props = defineProps({
github: {
type: Object,
default: () => ({}),
},
wakatime: {
type: Object,
default: () => ({}),
},
});
const github = props.github;
const wakatime = props.wakatime;