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

32
app/components/WakatimeSection.vue
View File

@@ -1,13 +1,17 @@
<template>
<section class="card" v-if="showComponent && (weeklyData || allTimeData)">
<section v-if="showComponent && (weeklyData || allTimeData)" class="card">
<div class="header">
<h2>Wakatime</h2>
<div class="tabs">
<button class="tab-button" :class="{ active: activeTab === 'weekly' }" @click="activeTab = 'weekly'">
最近7天
</button>
<button class="tab-button" :class="{ active: activeTab === 'allTime' }" @click="activeTab = 'allTime'"
v-if="allTimeData">
<button
v-if="allTimeData"
class="tab-button"
:class="{ active: activeTab === 'allTime' }"
@click="activeTab = 'allTime'"
>
所有时间
</button>
</div>
@@ -36,32 +40,32 @@
</div>
</div>
<div class="lang-wrap" v-if="currentData.languages && currentData.languages.length">
<div v-if="currentData.languages && currentData.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 topLanguages" :key="lang.name" class="lang-row">
<div class="lang-label">
<span class="dot" :style="{ background: colorFor(lang.name) }"></span>
<span class="dot" :style="{ background: colorFor(lang.name) }" />
<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)"></span>
<span class="lang-bar-fill" :style="barStyle(lang)" />
</div>
</li>
</ul>
</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>
</section>
@@ -70,7 +74,13 @@
<script setup>
import { ref, onMounted, computed } from "vue";
const props = defineProps({ wakatime: Object });
const props = defineProps({
wakatime: {
type: Object,
required: false,
default: () => ({ languages: [] }),
},
});
const wakatime = props.wakatime;
const weeklyData = ref(null);
@@ -79,7 +89,7 @@ const statusData = ref(null);
const showComponent = ref(true);
const activeTab = ref("weekly");
const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#201a1fff", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
const currentData = computed(() => {
return activeTab.value === "weekly" ? weeklyData.value : allTimeData.value;