mirror of
https://github.com/RhenCloud/Cloud-Home.git
synced 2026-01-22 17:39:07 +08:00
Compare commits
2 Commits
a6d4c8a27b
...
6cc98acd88
| Author | SHA1 | Date | |
|---|---|---|---|
| 6cc98acd88 | |||
| ba95a16f21 |
12
README.md
12
README.md
@@ -1,6 +1,6 @@
|
|||||||
# Cloud Home
|
# Cloud Home
|
||||||
|
|
||||||
一个基于 Nuxt 3 (Vue 3) 的个人主页模板，内置友链申请、网站展示、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。
|
一款基于 Nuxt 4 的个人主页模板，内置友链申请、网站展示、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。
|
||||||
|
|
||||||
## 特性
|
## 特性
|
||||||
|
|
||||||
@@ -11,10 +11,16 @@
|
|||||||
|
|
||||||
## 技术栈
|
## 技术栈
|
||||||
|
|
||||||
- 前端：Nuxt 3（Vue 3）+ HTML + CSS
|
- 前端：Nuxt 4 + Tailwind CSS
|
||||||
- 构建 / 运行：Nuxt 3 + Nitro
|
- 构建 / 运行：Nuxt 4 + Nitro
|
||||||
- 部署：Vercel（Nuxt 构建 + Nitro 函数）
|
- 部署：Vercel（Nuxt 构建 + Nitro 函数）
|
||||||
|
|
||||||
|
## TODO
|
||||||
|
|
||||||
|
- [ ] 增加主题色配置
|
||||||
|
- [ ] 增加追番模块
|
||||||
|
- [ ] 增加留言板模块
|
||||||
|
|
||||||
## 致谢
|
## 致谢
|
||||||
|
|
||||||
排名不分先后
|
排名不分先后
|
||||||
|
|||||||
@@ -46,18 +46,12 @@ const checkIfMobile = () => {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
checkIfMobile();
|
checkIfMobile();
|
||||||
window.addEventListener("resize", checkIfMobile);
|
window.addEventListener("resize", checkIfMobile);
|
||||||
// const script = document.createElement("script");
|
|
||||||
// script.src = "/js/netease-mini-player-v2.js";
|
|
||||||
// document.head.appendChild(script);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const getBackgroundImage = () => {
|
const getBackgroundImage = () => {
|
||||||
if (!bg.enable) return undefined;
|
if (!bg.enable) return undefined;
|
||||||
|
|
||||||
const image = isMobile.value && bg.mobileImage ? bg.mobileImage : bg.image;
|
const image = isMobile.value && bg.mobileImage ? bg.mobileImage : bg.image;
|
||||||
|
|
||||||
if (!image) return undefined;
|
if (!image) return undefined;
|
||||||
|
|
||||||
return image.startsWith("http") ? image : `/${image}`;
|
return image.startsWith("http") ? image : `/${image}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -65,9 +59,7 @@ const backgroundStyle = computed(() => ({ backgroundColor: "#0f1629" }));
|
|||||||
|
|
||||||
const overlayStyle = computed(() => {
|
const overlayStyle = computed(() => {
|
||||||
const imageUrl = getBackgroundImage();
|
const imageUrl = getBackgroundImage();
|
||||||
|
|
||||||
if (!bg.enable || !imageUrl) return {};
|
if (!bg.enable || !imageUrl) return {};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
backgroundImage: `linear-gradient(${bg.overlay}, ${bg.overlay}), url('${imageUrl}')`,
|
backgroundImage: `linear-gradient(${bg.overlay}, ${bg.overlay}), url('${imageUrl}')`,
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
84
app/components/AboutSection.vue
Normal file
84
app/components/AboutSection.vue
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<section class="card flex flex-col gap-2.5">
|
||||||
|
<h2 class="m-0 mb-1">个人简介</h2>
|
||||||
|
<p class="text-text-muted text-sm m-0 mb-3 block">关于我 · About Me</p>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap justify-center gap-3.5">
|
||||||
|
<article v-if="age"
|
||||||
|
class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-primary/40 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-primary/6">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xl leading-none">🎂</span>
|
||||||
|
<h3 class="m-0 text-sm font-semibold text-white/90">年龄</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
|
||||||
|
{{ age }} 岁
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article v-if="profile?.gender"
|
||||||
|
class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xl leading-none">⚧️</span>
|
||||||
|
<h3 class="m-0 text-sm font-semibold text-white/90">性别</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
|
||||||
|
{{ profile.gender }}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article v-if="profile?.pronouns"
|
||||||
|
class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xl leading-none">🗣️</span>
|
||||||
|
<h3 class="m-0 text-sm font-semibold text-white/90">代词</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
|
||||||
|
{{ profile.pronouns }}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article v-if="profile?.location"
|
||||||
|
class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xl leading-none">📍</span>
|
||||||
|
<h3 class="m-0 text-sm font-semibold text-white/90">地区</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
|
||||||
|
{{ profile.location }}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mt-2.5">
|
||||||
|
<article v-for="item in items" :key="item.title"
|
||||||
|
class="bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-3 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
|
||||||
|
<div class="flex items-center gap-2 mb-1.5">
|
||||||
|
<span class="text-2xl leading-none">{{ item.icon }}</span>
|
||||||
|
<h3 class="m-0 text-base font-semibold">{{ item.title }}</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-text-muted text-sm m-0">{{ item.desc }}</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
items: Array,
|
||||||
|
profile: Object,
|
||||||
|
});
|
||||||
|
|
||||||
|
const age = computed(() => {
|
||||||
|
if (!props.profile?.birthday) return null;
|
||||||
|
const birthDate = new Date(props.profile.birthday);
|
||||||
|
const today = new Date();
|
||||||
|
let age = today.getFullYear() - birthDate.getFullYear();
|
||||||
|
const m = today.getMonth() - birthDate.getMonth();
|
||||||
|
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
|
||||||
|
age--;
|
||||||
|
}
|
||||||
|
return age;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -1,18 +1,38 @@
|
|||||||
<template>
|
<template>
|
||||||
<footer class="card footer">
|
<footer class="card text-center mt-auto w-full flex flex-col gap-1">
|
||||||
<p class="muted" v-if="showHitokoto && quote">
|
<!-- 一言 -->
|
||||||
「{{ quote }}」<span v-if="from" class="from">—— {{ from }}</span>
|
<p class="text-text-muted text-sm m-0 italic" v-if="showHitokoto && quote">
|
||||||
|
「{{ quote }}」<span v-if="from" class="ml-1.5">—— {{ from }}</span>
|
||||||
</p>
|
</p>
|
||||||
<p class="muted stats" v-if="showStats && !statsError">
|
|
||||||
👁️ {{ visitors }} visitors · 📊 {{ pageviews }} pageviews
|
<!-- 访问统计 -->
|
||||||
|
<p class="text-text-muted text-xs m-0" v-if="showStats && !statsError">
|
||||||
|
👁️ {{ visitors }} · 📊 {{ pageviews }}
|
||||||
</p>
|
</p>
|
||||||
<!-- <p class="muted stats" v-if="showStats && statsError">🔒 由于启用了隐私保护拓展，禁用状态统计</p> -->
|
|
||||||
<p class="muted beian" v-if="contact.beian">
|
<!-- 备案信息 -->
|
||||||
<a :href="contact.beianLink || 'https://beian.miit.gov.cn/'" target="_blank" rel="noreferrer">
|
<p class="text-text-muted text-xs m-0" v-if="contact.beian">
|
||||||
|
<a :href="contact.beianLink || 'https://beian.miit.gov.cn/'" target="_blank" rel="noreferrer"
|
||||||
|
class="opacity-85 transition-all duration-200 hover:text-primary hover:opacity-100">
|
||||||
{{ contact.beian }}
|
{{ contact.beian }}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<div class="custom-html" v-if="contact.customHtml" v-html="contact.customHtml"></div>
|
|
||||||
|
<!-- 框架与技术栈信息 -->
|
||||||
|
<p class="text-text-muted text-xs m-0">
|
||||||
|
Powered by
|
||||||
|
<a href="https://nuxt.com" target="_blank" rel="noreferrer"
|
||||||
|
class="text-primary hover:text-accent transition-colors">Nuxt 4</a>
|
||||||
|
·
|
||||||
|
<a href="https://tailwindcss.com" target="_blank" rel="noreferrer"
|
||||||
|
class="text-primary hover:text-accent transition-colors">Tailwind CSS</a>
|
||||||
|
·
|
||||||
|
<a href="https://vuejs.org" target="_blank" rel="noreferrer"
|
||||||
|
class="text-primary hover:text-accent transition-colors">Vue 3</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- 自定义 HTML -->
|
||||||
|
<div v-if="contact.customHtml" v-html="contact.customHtml"></div>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -103,45 +123,3 @@ onMounted(() => {
|
|||||||
if (showStats.value) fetchStats();
|
if (showStats.value) fetchStats();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.from {
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.beian {
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 6px 0;
|
|
||||||
letter-spacing: 0.2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.beian a {
|
|
||||||
color: inherit;
|
|
||||||
opacity: 0.85;
|
|
||||||
padding: 3px 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.beian a:hover {
|
|
||||||
color: var(--accent, #7cc1ff);
|
|
||||||
background: rgba(124, 193, 255, 0.1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-html {
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats {
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 6px 0;
|
|
||||||
letter-spacing: 0.2px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
225
app/components/FriendsSection.vue
Normal file
225
app/components/FriendsSection.vue
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card panel flex flex-col gap-2.5">
|
||||||
|
<h2 class="m-0 mb-1 gradient-text">友情链接</h2>
|
||||||
|
<p class="text-text-muted text-sm m-0 mb-3 block">欢迎互换友链 · Friends</p>
|
||||||
|
<div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
|
||||||
|
<article v-for="f in displayedFriends" :key="f.url"
|
||||||
|
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-pink-400/50 w-[290px] h-[145px] flex flex-col">
|
||||||
|
<div class="flex items-center justify-between mb-1.5">
|
||||||
|
<div class="flex items-center gap-2 min-w-0">
|
||||||
|
<img v-if="f.avatar" :src="f.avatar" :alt="f.name" loading="lazy"
|
||||||
|
class="w-12 h-12 rounded-full object-cover border border-white/15" />
|
||||||
|
<h3 class="m-0 font-semibold text-base whitespace-nowrap overflow-hidden text-ellipsis">
|
||||||
|
{{ f.name }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<span class="rounded-full px-2.5 py-1 text-xs bg-purple-400/15 text-purple-300">友链</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
|
||||||
|
{{ f.desc || "一个有趣的站点" }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a :href="f.url" target="_blank" rel="noreferrer"
|
||||||
|
class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-pink-300 hover:text-pink-400 transition-all duration-200 hover:gap-2">
|
||||||
|
访问 →
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section class="card flex flex-col gap-2.5">
|
||||||
|
<div class="flex justify-center items-center align-center flex-wrap">
|
||||||
|
<button @click="openForm"
|
||||||
|
class="px-3 py-2 rounded-2xl border border-primary/50 bg-primary/12 text-text-primary cursor-pointer transition-all duration-200 hover:bg-primary/20 hover:border-primary/80 hover:shadow-lg hover:shadow-primary/25">
|
||||||
|
申请友链
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<Teleport to="body">
|
||||||
|
<div v-if="showDialog" class="fixed inset-0 bg-black/45 backdrop-blur-sm flex items-center justify-center z-50"
|
||||||
|
@click.self="closeDialog">
|
||||||
|
<div
|
||||||
|
class="min-w-[280px] max-w-[420px] bg-gradient-to-br from-pink-500/12 to-white/8 border border-white/15 rounded-2xl p-4 shadow-xl">
|
||||||
|
<h3 class="m-0 mb-2">{{ dialogTitle }}</h3>
|
||||||
|
<p class="text-text-muted text-sm mb-4">{{ dialogText }}</p>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<button @click="closeDialog"
|
||||||
|
class="px-3 py-2 rounded-2xl border border-primary/50 bg-primary/12 text-text-primary cursor-pointer hover:bg-primary/20 transition-all">
|
||||||
|
好的
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
|
|
||||||
|
<!-- 申请友链模态弹窗 -->
|
||||||
|
<Teleport to="body">
|
||||||
|
<div v-if="showFormModal"
|
||||||
|
class="fixed inset-0 bg-black/45 backdrop-blur-sm flex items-center justify-center z-50"
|
||||||
|
@click.self="showFormModal = false">
|
||||||
|
<div
|
||||||
|
class="w-[92%] max-w-[540px] bg-gradient-to-br from-white/8 to-primary/6 border border-white/15 rounded-2xl p-6 shadow-xl">
|
||||||
|
<h3 class="m-0 mb-4 text-center">申请友链</h3>
|
||||||
|
|
||||||
|
<div class="mb-4 text-sm text-text-primary">
|
||||||
|
<div class="mb-2 font-semibold">请在申请前在你站点添加以下信息（示例 JSON）：</div>
|
||||||
|
<pre
|
||||||
|
class="bg-white/6 border border-white/10 rounded-lg p-3 text-xs overflow-auto"><code>{{ exampleJson }}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form @submit.prevent="submitForm" class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
<label class="flex flex-col gap-1 text-sm text-text-primary font-semibold sm:col-span-2">
|
||||||
|
网站名称 *
|
||||||
|
<input v-model="form.name" required placeholder="网站名称"
|
||||||
|
class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- URL 与 Email 同行 -->
|
||||||
|
<label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
|
||||||
|
网站链接 *
|
||||||
|
<input v-model="form.url" type="url" required placeholder="https://example.com"
|
||||||
|
class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
|
||||||
|
</label>
|
||||||
|
<label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
|
||||||
|
联系邮箱 *
|
||||||
|
<input v-model="form.email" type="email" required placeholder="example@example.com"
|
||||||
|
class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- 描述 与 头像 同行 -->
|
||||||
|
<label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
|
||||||
|
网站描述
|
||||||
|
<input v-model="form.desc" placeholder="可选"
|
||||||
|
class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
|
||||||
|
</label>
|
||||||
|
<label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
|
||||||
|
头像链接
|
||||||
|
<input v-model="form.avatar" type="url" placeholder="可选，展示头像"
|
||||||
|
class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="flex flex-col gap-1 text-sm text-text-primary font-semibold sm:col-span-2">
|
||||||
|
想说的话
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<textarea v-model="form.message" placeholder="可选，最多50字" maxlength="50"
|
||||||
|
class="flex-1 px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary h-24 resize-none"></textarea>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="sm:col-span-2 flex items-center justify-center gap-3 mt-2">
|
||||||
|
<button type="button" @click="showFormModal = false"
|
||||||
|
class="px-3 py-2 rounded-2xl border border-white/10 bg-white/6">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button type="submit" :disabled="loading"
|
||||||
|
class="px-3 py-2 rounded-2xl border border-primary/50 bg-primary/12 text-text-primary disabled:opacity-50">
|
||||||
|
{{ loading ? "提交中..." : "提交" }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<span class="text-text-muted text-sm">{{ message }}</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, watch, computed } from "vue";
|
||||||
|
import siteConfig from "../config/siteConfig";
|
||||||
|
const props = defineProps({ friends: { type: Array, default: () => [] } });
|
||||||
|
const showFormModal = ref(false);
|
||||||
|
const loading = ref(false);
|
||||||
|
const message = ref("");
|
||||||
|
const showDialog = ref(false);
|
||||||
|
const dialogTitle = ref("");
|
||||||
|
const dialogText = ref("");
|
||||||
|
const form = reactive({
|
||||||
|
name: "",
|
||||||
|
url: "",
|
||||||
|
desc: "",
|
||||||
|
email: "",
|
||||||
|
avatar: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
const displayedFriends = ref([]);
|
||||||
|
|
||||||
|
const shuffle = (list) => {
|
||||||
|
const arr = [...list];
|
||||||
|
for (let i = arr.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[arr[i], arr[j]] = [arr[j], arr[i]];
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.friends,
|
||||||
|
(val) => {
|
||||||
|
displayedFriends.value = shuffle(val || []);
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
const exampleJson = computed(() => {
|
||||||
|
const name = siteConfig.profile?.name || siteConfig.siteMeta?.title || "";
|
||||||
|
const url = siteConfig.siteMeta?.url || "";
|
||||||
|
const desc = siteConfig.profile?.bio || "";
|
||||||
|
const email = siteConfig.profile.email || "";
|
||||||
|
const avatarRaw = siteConfig.profile?.avatar || "";
|
||||||
|
const avatar = resolveUrl(avatarRaw);
|
||||||
|
return JSON.stringify({ name, url, desc, email, avatar }, null, 2);
|
||||||
|
});
|
||||||
|
|
||||||
|
const openForm = () => {
|
||||||
|
showFormModal.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// resolve possible local paths to absolute URLs using site meta URL
|
||||||
|
const resolveUrl = (p) => {
|
||||||
|
if (!p) return "";
|
||||||
|
const s = String(p).trim();
|
||||||
|
if (/^https?:\/\//i.test(s) || /^\/\//.test(s)) return s;
|
||||||
|
const base = (siteConfig.siteMeta && siteConfig.siteMeta.url) ? String(siteConfig.siteMeta.url).replace(/\/$/, "") : "";
|
||||||
|
if (!base) return s;
|
||||||
|
if (s.startsWith("/")) return base + s;
|
||||||
|
return base + "/" + s;
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitForm = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
message.value = "";
|
||||||
|
try {
|
||||||
|
const resp = await fetch("/api/send-mail", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(form),
|
||||||
|
});
|
||||||
|
if (!resp.ok) throw new Error("send failed");
|
||||||
|
form.name = "";
|
||||||
|
form.url = "";
|
||||||
|
form.desc = "";
|
||||||
|
form.email = "";
|
||||||
|
form.avatar = "";
|
||||||
|
form.message = "";
|
||||||
|
message.value = "提交成功，已发送申请邮件";
|
||||||
|
showFormModal.value = false;
|
||||||
|
dialogTitle.value = "提交成功";
|
||||||
|
dialogText.value = "已发送申请邮件，感谢你的提交，将会尽快审核并在通过后通过邮件联系。";
|
||||||
|
showDialog.value = true;
|
||||||
|
} catch (e) {
|
||||||
|
message.value = "提交失败，请稍后重试";
|
||||||
|
dialogTitle.value = "提交失败";
|
||||||
|
dialogText.value = "邮件发送失败，请稍后重试或检查网络连接。";
|
||||||
|
showDialog.value = true;
|
||||||
|
console.error(e);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeDialog = () => {
|
||||||
|
showDialog.value = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
50
app/components/GithubSection.vue
Normal file
50
app/components/GithubSection.vue
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<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>
|
||||||
|
<img :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy"
|
||||||
|
class="rounded-xl border border-white/10 hover:border-primary/30 transition-all duration-200"
|
||||||
|
class="w-full rounded-2xl border border-white/10" />
|
||||||
|
</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>
|
||||||
|
<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)"></span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from "vue";
|
||||||
|
const props = defineProps({ github: Object });
|
||||||
|
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>
|
||||||
20
app/components/HeroSection.vue
Normal file
20
app/components/HeroSection.vue
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<section class="card grid grid-cols-[120px_1fr] gap-4 items-center hover:shadow-lg-dark group">
|
||||||
|
<div class="relative">
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 rounded-full bg-gradient-to-br from-primary/30 to-accent/20 blur-xl group-hover:blur-2xl transition-all duration-300 opacity-0 group-hover:opacity-100">
|
||||||
|
</div>
|
||||||
|
<img class="relative w-30 h-30 rounded-full object-cover border-2 border-primary/40 shadow-md-dark bg-white transition-transform duration-300 group-hover:scale-105"
|
||||||
|
:src="profile.avatar" alt="avatar" loading="lazy" />
|
||||||
|
</div>
|
||||||
|
<div class="overflow-hidden">
|
||||||
|
<h1 class="text-2xl font-bold">{{ profile.name }}</h1>
|
||||||
|
<p class="text-text-muted text-sm mt-1">{{ profile.title }}</p>
|
||||||
|
<p class="mt-2 line-clamp-2">{{ profile.bio }}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({ profile: Object });
|
||||||
|
</script>
|
||||||
@@ -1,18 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div v-if="music.enable && (music.playlistId || music.songId)" class="netease-mini-player"
|
||||||
v-if="music.enable && (music.playlistId || music.songId)"
|
|
||||||
class="netease-mini-player"
|
|
||||||
:data-playlist-id="music.mode === 'floating' ? music.playlistId : undefined"
|
:data-playlist-id="music.mode === 'floating' ? music.playlistId : undefined"
|
||||||
:data-song-id="music.mode === 'embed' ? music.songId : undefined"
|
:data-song-id="music.mode === 'embed' ? music.songId : undefined" :data-embed="music.mode === 'embed'"
|
||||||
:data-embed="music.mode === 'embed'"
|
:data-position="music.position" :data-lyric="music.lyric" :data-theme="music.theme"
|
||||||
:data-position="music.position"
|
:data-autoplay="music.autoplay" :data-default-minimized="music.defaultMinimized"
|
||||||
:data-lyric="music.lyric"
|
:data-auto-pause="music.autoPause" :data-api-urls="JSON.stringify(music.apiUrls)"></div>
|
||||||
:data-theme="music.theme"
|
|
||||||
:data-autoplay="music.autoplay"
|
|
||||||
:data-default-minimized="music.defaultMinimized"
|
|
||||||
:data-auto-pause="music.autoPause"
|
|
||||||
:data-api-urls="JSON.stringify(music.apiUrls)"
|
|
||||||
></div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
51
app/components/PageSwitcher.vue
Normal file
51
app/components/PageSwitcher.vue
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<div class="my-4 mx-auto max-w-3xl w-full px-4 py-3 grid grid-cols-[auto_1fr_auto] gap-3 items-center">
|
||||||
|
<button :disabled="currentIndex <= 0" @click="goPrev"
|
||||||
|
class="bg-white/10 text-text-primary border border-white/15 rounded-2xl px-3 py-2 cursor-pointer transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed">
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
<div class="flex gap-2 flex-wrap justify-center">
|
||||||
|
<button v-for="item in pages" :key="item.name" :class="{
|
||||||
|
'bg-primary/30 border-primary/60 text-primary shadow-lg shadow-primary/25':
|
||||||
|
item.name === route.name,
|
||||||
|
}" @click="router.push({ name: item.name })"
|
||||||
|
class="px-2.5 py-2 bg-white/10 text-text-primary border border-white/15 rounded-2xl cursor-pointer transition-all duration-200 hover:bg-white/15 hover:border-primary/40">
|
||||||
|
{{ item.label }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button :disabled="currentIndex >= pages.length - 1" @click="goNext"
|
||||||
|
class="bg-white/10 text-text-primary border border-white/15 rounded-2xl px-3 py-2 cursor-pointer transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed">
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from "vue";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const pages = [
|
||||||
|
{ name: "index", label: "首页" },
|
||||||
|
{ name: "about", label: "关于" },
|
||||||
|
{ name: "sites", label: "网站" },
|
||||||
|
{ name: "projects", label: "项目" },
|
||||||
|
{ name: "friends", label: "友链" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const currentIndex = computed(() => pages.findIndex((item) => item.name === route.name));
|
||||||
|
|
||||||
|
const goPrev = () => {
|
||||||
|
if (currentIndex.value > 0) {
|
||||||
|
router.push({ name: pages[currentIndex.value - 1].name });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const goNext = () => {
|
||||||
|
if (currentIndex.value < pages.length - 1) {
|
||||||
|
router.push({ name: pages[currentIndex.value + 1].name });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
35
app/components/ProjectsSection.vue
Normal file
35
app/components/ProjectsSection.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<section class="card panel flex flex-col gap-2.5">
|
||||||
|
<h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
|
||||||
|
|
||||||
|
<p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
|
||||||
|
<article v-for="p in projects" :key="p.url"
|
||||||
|
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-yellow-400/50 w-[290px] h-[145px] flex flex-col">
|
||||||
|
<div class="flex items-center justify-between mb-1.5">
|
||||||
|
<h3 class="font-medium truncate">
|
||||||
|
{{ p.name }}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<span class="rounded-full px-2.5 py-1 text-xs bg-sky-400/15 text-sky-300"> 项目 </span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
|
||||||
|
{{ p.desc }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a :href="p.url" target="_blank" rel="noreferrer"
|
||||||
|
class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-yellow-300 hover:text-yellow-400 transition-all duration-200 hover:gap-2">
|
||||||
|
查看仓库 →
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
projects: Array,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
35
app/components/SitesSection.vue
Normal file
35
app/components/SitesSection.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<section class="card panel flex flex-col gap-2.5">
|
||||||
|
<h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
|
||||||
|
|
||||||
|
<p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
|
||||||
|
<article v-for="site in sites" :key="site.url"
|
||||||
|
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-blue-400/50 w-[290px] h-[145px] flex flex-col">
|
||||||
|
<div class="flex items-center justify-between mb-1.5">
|
||||||
|
<h3 class="font-medium truncate">
|
||||||
|
{{ site.name }}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<span class="rounded-full px-2.5 py-1 text-xs bg-sky-400/15 text-green-300"> 在线 </span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
|
||||||
|
{{ site.desc }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a :href="site.url" target="_blank" rel="noreferrer"
|
||||||
|
class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-blue-300 hover:text-blue-400 transition-all duration-200 hover:gap-2">
|
||||||
|
查看 →
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
sites: Array,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
34
app/components/SitesSection_old.vue
Normal file
34
app/components/SitesSection_old.vue
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<section class="card flex flex-col gap-2.5">
|
||||||
|
<h2 class="m-0 mb-1 gradient-text">我的网站</h2>
|
||||||
|
<p class="text-text-muted text-sm m-0 mb-3 block">正在运行的站点 · Websites</p>
|
||||||
|
<div class="w-full -mx-[1.125rem] -mb-[1.125rem]">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-[1.125rem] pb-[1.125rem]">
|
||||||
|
<article
|
||||||
|
v-for="site in sites"
|
||||||
|
:key="site.url"
|
||||||
|
class="bg-gradient-to-br from-white/5 to-white/1 border border-white/10 rounded-2xl p-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/60 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-yellow-500/6"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between mb-1.5">
|
||||||
|
<h3 class="m-0 font-semibold text-base">{{ site.name }}</h3>
|
||||||
|
<span class="px-2.5 py-1 rounded-full bg-green-500/14 text-green-300 text-xs font-medium"
|
||||||
|
>在线</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-text-muted text-sm m-0 mb-2.5">{{ site.desc }}</p>
|
||||||
|
<a
|
||||||
|
:href="site.url"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
class="inline-flex items-center gap-1.5 mt-2.5 text-blue-400 font-semibold text-sm hover:text-blue-300 transition-all duration-200 hover:gap-2"
|
||||||
|
>查看 →</a
|
||||||
|
>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({ sites: Array });
|
||||||
|
</script>
|
||||||
28
app/components/SkillsSection.vue
Normal file
28
app/components/SkillsSection.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<section class="card flex flex-col gap-2.5">
|
||||||
|
<div>
|
||||||
|
<h2 class="m-0 mb-1">技能专长</h2>
|
||||||
|
<p class="text-text-muted text-sm m-0 mb-3">我常用的工具与技术 · Skills & Technologies</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
<article v-for="group in skills" :key="group.title"
|
||||||
|
class="bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-primary/8">
|
||||||
|
<header class="mb-3">
|
||||||
|
<h3 class="text-base font-semibold m-0">{{ group.title }}</h3>
|
||||||
|
</header>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span v-for="item in group.items" :key="item"
|
||||||
|
class="inline-flex items-center p-1.5 rounded-2xl bg-primary/14 border border-primary/18 transition-all duration-200 hover:bg-primary/24 hover:border-primary/40 hover:scale-110">
|
||||||
|
<img :src="iconSrc(item)" :alt="item" :title="item" loading="lazy"
|
||||||
|
class="w-7 h-7 rounded-2xl" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({ skills: { type: Array, default: () => [] } });
|
||||||
|
const iconSrc = (id) => `https://skillicons.dev/icons?i=${encodeURIComponent(id)}&theme=dark`;
|
||||||
|
</script>
|
||||||
@@ -1,12 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="card panel">
|
<section class="card flex flex-col gap-2.5">
|
||||||
<h2>社交链接</h2>
|
<h2 class="m-0 mb-1">社交链接</h2>
|
||||||
<p class="muted">社交账号 · Links</p>
|
<p class="text-text-muted text-sm m-0 mb-3 block">社交账号 · Links</p>
|
||||||
<div class="chips">
|
<div class="flex flex-wrap gap-2.5">
|
||||||
<a v-for="link in links" :key="link.url" :href="link.url" target="_blank" rel="noreferrer">
|
<a v-for="link in links" :key="link.url" :href="link.url" target="_blank" rel="noreferrer"
|
||||||
<span v-if="iconFor(link)" class="icon">
|
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/10 text-text-primary text-sm font-medium transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary hover:-translate-y-1">
|
||||||
|
<span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
|
||||||
<i v-if="iconFor(link).fa" :class="iconFor(link).fa"></i>
|
<i v-if="iconFor(link).fa" :class="iconFor(link).fa"></i>
|
||||||
<img v-else :src="iconFor(link).src" :alt="link.name" loading="lazy" />
|
<img v-else :src="iconFor(link).src" :alt="link.name" loading="lazy" class="w-full h-full" />
|
||||||
</span>
|
</span>
|
||||||
<span>{{ link.name }}</span>
|
<span>{{ link.name }}</span>
|
||||||
</a>
|
</a>
|
||||||
@@ -53,44 +54,9 @@ onMounted(() => {
|
|||||||
const link = document.createElement("link");
|
const link = document.createElement("link");
|
||||||
link.id = id;
|
link.id = id;
|
||||||
link.rel = "stylesheet";
|
link.rel = "stylesheet";
|
||||||
link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
|
link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap";
|
||||||
link.crossOrigin = "anonymous";
|
link.crossOrigin = "anonymous";
|
||||||
link.referrerPolicy = "no-referrer";
|
link.referrerPolicy = "no-referrer";
|
||||||
document.head.appendChild(link);
|
document.head.appendChild(link);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.muted {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.chips {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
display: inline-flex;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.icon i,
|
|
||||||
.icon img {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -6,11 +6,8 @@
|
|||||||
<button class="tab-button" :class="{ active: activeTab === 'github' }" @click="activeTab = 'github'">
|
<button class="tab-button" :class="{ active: activeTab === 'github' }" @click="activeTab = 'github'">
|
||||||
GitHub
|
GitHub
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="tab-button" :class="{ active: activeTab === 'wakatime' }"
|
||||||
class="tab-button"
|
@click="activeTab = 'wakatime'">
|
||||||
:class="{ active: activeTab === 'wakatime' }"
|
|
||||||
@click="activeTab = 'wakatime'"
|
|
||||||
>
|
|
||||||
Wakatime
|
Wakatime
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -91,18 +88,12 @@
|
|||||||
|
|
||||||
<div class="wakatime-tabs" v-if="allTimeData">
|
<div class="wakatime-tabs" v-if="allTimeData">
|
||||||
<div class="wakatime-mini-tabs">
|
<div class="wakatime-mini-tabs">
|
||||||
<button
|
<button class="wakatime-tab-button" :class="{ active: wakatimeActiveTab === 'weekly' }"
|
||||||
class="wakatime-tab-button"
|
@click="wakatimeActiveTab = 'weekly'">
|
||||||
:class="{ active: wakatimeActiveTab === 'weekly' }"
|
|
||||||
@click="wakatimeActiveTab = 'weekly'"
|
|
||||||
>
|
|
||||||
最近7天
|
最近7天
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="wakatime-tab-button" :class="{ active: wakatimeActiveTab === 'allTime' }"
|
||||||
class="wakatime-tab-button"
|
@click="wakatimeActiveTab = 'allTime'">
|
||||||
:class="{ active: wakatimeActiveTab === 'allTime' }"
|
|
||||||
@click="wakatimeActiveTab = 'allTime'"
|
|
||||||
>
|
|
||||||
所有时间
|
所有时间
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -122,7 +113,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, reactive, computed } from "vue";
|
import { ref, onMounted, computed } from "vue";
|
||||||
|
|
||||||
const props = defineProps({ github: Object, wakatime: Object });
|
const props = defineProps({ github: Object, wakatime: Object });
|
||||||
const github = props.github;
|
const github = props.github;
|
||||||
@@ -6,12 +6,8 @@
|
|||||||
<button class="tab-button" :class="{ active: activeTab === 'weekly' }" @click="activeTab = 'weekly'">
|
<button class="tab-button" :class="{ active: activeTab === 'weekly' }" @click="activeTab = 'weekly'">
|
||||||
最近7天
|
最近7天
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="tab-button" :class="{ active: activeTab === 'allTime' }" @click="activeTab = 'allTime'"
|
||||||
class="tab-button"
|
v-if="allTimeData">
|
||||||
:class="{ active: activeTab === 'allTime' }"
|
|
||||||
@click="activeTab = 'allTime'"
|
|
||||||
v-if="allTimeData"
|
|
||||||
>
|
|
||||||
所有时间
|
所有时间
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -4,6 +4,7 @@ const siteConfig = {
|
|||||||
title: "I'm RhenCloud.",
|
title: "I'm RhenCloud.",
|
||||||
avatar: "/avatar.webp", // public/avatar.webp
|
avatar: "/avatar.webp", // public/avatar.webp
|
||||||
bio: "趁世界还未重启之前 约一次爱恋",
|
bio: "趁世界还未重启之前 约一次爱恋",
|
||||||
|
email: "i@rhen.cloud",
|
||||||
birthday: "2010-03-28",
|
birthday: "2010-03-28",
|
||||||
// gender: "女",
|
// gender: "女",
|
||||||
pronouns: "她",
|
pronouns: "她",
|
||||||
@@ -31,6 +32,7 @@ const siteConfig = {
|
|||||||
|
|
||||||
siteMeta: {
|
siteMeta: {
|
||||||
title: "RhenCloud",
|
title: "RhenCloud",
|
||||||
|
url: "https://rhen.cloud",
|
||||||
icon: "/favicon.svg", // public/favicon.svg
|
icon: "/favicon.svg", // public/favicon.svg
|
||||||
startDate: "2025-12-06",
|
startDate: "2025-12-06",
|
||||||
},
|
},
|
||||||
@@ -40,7 +42,7 @@ const siteConfig = {
|
|||||||
enable: true,
|
enable: true,
|
||||||
// URL 支持：可使用外部 URL 或本地路径
|
// URL 支持：可使用外部 URL 或本地路径
|
||||||
// 例如: "https://example.com/bg.jpg" 或 "background.webp"
|
// 例如: "https://example.com/bg.jpg" 或 "background.webp"
|
||||||
image: "background.png", // 背景图片 URL 或本地路径（桌面端）
|
image: "background.webp", // 背景图片 URL 或本地路径（桌面端）
|
||||||
mobileImage: "https://www.loliapi.com/acg/pe/", // 移动端背景图片（可选，不设置则使用 image）
|
mobileImage: "https://www.loliapi.com/acg/pe/", // 移动端背景图片（可选，不设置则使用 image）
|
||||||
blur: 0, // 背景模糊程度 (0-100)
|
blur: 0, // 背景模糊程度 (0-100)
|
||||||
overlay: "rgba(70, 59, 82, 0.4)", // 背景遮罩颜色与透明度
|
overlay: "rgba(70, 59, 82, 0.4)", // 背景遮罩颜色与透明度
|
||||||
@@ -117,6 +119,11 @@ const siteConfig = {
|
|||||||
{ name: "Cloud Home", url: "https://github.com/RhenCloud/cloud-home", desc: "个人主页模板" },
|
{ name: "Cloud Home", url: "https://github.com/RhenCloud/cloud-home", desc: "个人主页模板" },
|
||||||
{ name: "ILP", url: "https://github.com/RhenCloud/ILP", desc: "跨平台、多网站、模块化的小说下载器" },
|
{ name: "ILP", url: "https://github.com/RhenCloud/ILP", desc: "跨平台、多网站、模块化的小说下载器" },
|
||||||
{ name: "ILP-C++", url: "https://github.com/RhenCloud/ILP-Cpp", desc: "跨平台、多网站、模块化的小说下载器" },
|
{ name: "ILP-C++", url: "https://github.com/RhenCloud/ILP-Cpp", desc: "跨平台、多网站、模块化的小说下载器" },
|
||||||
|
{
|
||||||
|
name: "Test",
|
||||||
|
url: "https://github.com/RhenCloud/ILP-Cpp",
|
||||||
|
desc: "",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
friends: [
|
friends: [
|
||||||
{
|
{
|
||||||
@@ -131,6 +138,12 @@ const siteConfig = {
|
|||||||
url: "https://blog.sakura.ink",
|
url: "https://blog.sakura.ink",
|
||||||
avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
|
avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "鈴奈咲桜のBlog",
|
||||||
|
desc: "一个普普通通的Blog",
|
||||||
|
url: "https://blog.sakura.ink",
|
||||||
|
avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
footer: {
|
footer: {
|
||||||
@@ -2,7 +2,16 @@
|
|||||||
<main class="page">
|
<main class="page">
|
||||||
<HeroSection :profile="profile" />
|
<HeroSection :profile="profile" />
|
||||||
<SkillsSection :skills="skills" />
|
<SkillsSection :skills="skills" />
|
||||||
|
<Suspense>
|
||||||
|
<template #default>
|
||||||
<StatsSection :github="github" :wakatime="wakatime" />
|
<StatsSection :github="github" :wakatime="wakatime" />
|
||||||
|
</template>
|
||||||
|
<template #fallback>
|
||||||
|
<div class="card" style="text-align: center; padding: 40px">
|
||||||
|
<p>加载统计数据中...</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Suspense>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
353
app/styles.global.css
Normal file
353
app/styles.global.css
Normal file
@@ -0,0 +1,353 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
/* Font Awesome 字体优化 */
|
||||||
|
@font-face {
|
||||||
|
font-family: "Font Awesome 6 Solid";
|
||||||
|
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2");
|
||||||
|
font-display: swap;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Font Awesome 6 Brands";
|
||||||
|
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2") format("woff2");
|
||||||
|
font-display: swap;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
background: #0f1629;
|
||||||
|
color: #e8eefc;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0.375rem;
|
||||||
|
margin-bottom: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #7cc1ff;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #a8d5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.info-card {
|
||||||
|
@apply rounded-[14px] border border-white/10
|
||||||
|
bg-gradient-to-br from-white/5 to-white/0
|
||||||
|
px-4 py-3.5 transition-all duration-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.app-shell {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
color: #e8eefc;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
z-index: 0;
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -10;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-stack {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-body {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-toggle {
|
||||||
|
position: fixed;
|
||||||
|
right: 1.125rem;
|
||||||
|
bottom: 1.125rem;
|
||||||
|
z-index: 40;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 0.625rem 0.875rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||||
|
background: rgba(255, 255, 255, 0.14);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
color: #f7fbff;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
|
||||||
|
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-toggle:hover,
|
||||||
|
.background-toggle:focus-visible {
|
||||||
|
background: rgba(124, 193, 255, 0.25);
|
||||||
|
border-color: rgba(124, 193, 255, 0.65);
|
||||||
|
box-shadow: 0 14px 36px rgba(124, 193, 255, 0.28);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-toggle:active {
|
||||||
|
transform: translateY(1px) scale(0.99);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-toggle.active {
|
||||||
|
background: linear-gradient(135deg, rgba(124, 193, 255, 0.4), rgba(255, 255, 255, 0.2));
|
||||||
|
border-color: rgba(124, 193, 255, 0.8);
|
||||||
|
color: #0f1629;
|
||||||
|
box-shadow: 0 16px 42px rgba(124, 193, 255, 0.32);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-toggle .toggle-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-toggle .toggle-label {
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 1.125rem 1.25rem;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.15);
|
||||||
|
box-shadow: 0 12px 48px rgba(124, 193, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1rem 3rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chips {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chips a,
|
||||||
|
.chip {
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
color: #e8eefc;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chips a:hover,
|
||||||
|
.chip:hover {
|
||||||
|
background: rgba(124, 193, 255, 0.2);
|
||||||
|
border-color: rgba(124, 193, 255, 0.4);
|
||||||
|
color: #a8d5ff;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netease-mini-player,
|
||||||
|
.netease-mini-player-embed,
|
||||||
|
.nmpv2-player,
|
||||||
|
.nmpv2-root {
|
||||||
|
position: fixed !important;
|
||||||
|
bottom: 20px !important;
|
||||||
|
left: 20px !important;
|
||||||
|
right: auto !important;
|
||||||
|
max-width: calc(100% - 40px) !important;
|
||||||
|
z-index: 40001 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netease-mini-player > * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netease-mini-player.minimized {
|
||||||
|
width: 80px !important;
|
||||||
|
height: 80px !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netease-mini-player.minimized .album-cover-container {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
position: absolute !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netease-mini-player.minimized .album-cover {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netease-mini-player[data-position="bottom-left"] .playlist-container,
|
||||||
|
.netease-mini-player[data-position="bottom-right"] .playlist-container {
|
||||||
|
position: fixed !important;
|
||||||
|
bottom: calc(20px + 80px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
color: #a8b3cf;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-down-enter-active,
|
||||||
|
.fade-down-leave-active {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-down-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(0.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-down-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-0.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-up-enter-active,
|
||||||
|
.fade-up-leave-active {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-up-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-0.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-up-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(0.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.truncate-lines-2 {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.truncate-lines-3 {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-sm {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.background-toggle {
|
||||||
|
right: 0.75rem;
|
||||||
|
bottom: 0.75rem;
|
||||||
|
padding: 0.5625rem 0.75rem;
|
||||||
|
gap: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-toggle .toggle-label {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
9
app/utils/cssLoader.ts
Normal file
9
app/utils/cssLoader.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* CSS 加载工具 (已禁用)
|
||||||
|
*
|
||||||
|
* 此工具不再使用，因为Nuxt会自动处理CSS加载和优化
|
||||||
|
* 保留此文件以供参考，但不会被导入
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 所有导出的函数已被删除
|
||||||
|
// 使用 nuxt.config.ts 的 css 配置代替
|
||||||
20
index1.html
20
index1.html
@@ -1,20 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-cn">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Cloud Home</title>
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<!-- NeteaseMiniPlayer v2 CSS -->
|
|
||||||
<link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
<!-- NeteaseMiniPlayer v2 JS -->
|
|
||||||
<script src="/js/netease-mini-player-v2.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,22 +1,57 @@
|
|||||||
import { defineNuxtConfig } from "nuxt/config";
|
import { defineNuxtConfig } from "nuxt/config";
|
||||||
import siteConfig from "./src/config/siteConfig";
|
import siteConfig from "./app/config/siteConfig";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
compatibilityDate: "2025-12-12",
|
compatibilityDate: "2025-12-12",
|
||||||
srcDir: "src/",
|
srcDir: "app/",
|
||||||
css: ["~/styles.css"],
|
// 禁用 Vue Router 的非关键警告
|
||||||
|
vue: {
|
||||||
|
compilerOptions: {
|
||||||
|
isCustomElement: (tag) => tag.startsWith("ion-"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// Tailwind CSS 集成
|
||||||
|
css: ["~/styles.global.css"],
|
||||||
|
vite: {
|
||||||
|
plugins: [tailwindcss()],
|
||||||
|
},
|
||||||
app: {
|
app: {
|
||||||
head: {
|
head: {
|
||||||
title: siteConfig.siteMeta.title,
|
title: siteConfig.siteMeta.title,
|
||||||
link: [{ rel: "icon", href: siteConfig.siteMeta.icon }],
|
link: [
|
||||||
|
{ rel: "icon", href: siteConfig.siteMeta.icon },
|
||||||
|
// Font Awesome CDN 预加载和优化
|
||||||
|
{
|
||||||
|
rel: "preload",
|
||||||
|
as: "style",
|
||||||
|
href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap",
|
||||||
|
crossorigin: "anonymous",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rel: "preload",
|
||||||
|
as: "font",
|
||||||
|
href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2?font-display=swap",
|
||||||
|
type: "font/woff2",
|
||||||
|
crossorigin: "anonymous",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
rel: "preload",
|
||||||
|
as: "font",
|
||||||
|
href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2?font-display=swap",
|
||||||
|
type: "font/woff2",
|
||||||
|
crossorigin: "anonymous",
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// nitro: {
|
nitro: {
|
||||||
// prerender: {
|
prerender: {
|
||||||
// crawlLinks: true,
|
crawlLinks: true,
|
||||||
// routes: ["/sitemap.xml", "/rss.xml"],
|
// routes: ["/sitemap.xml", "/rss.xml"],
|
||||||
// },
|
},
|
||||||
// },
|
minify: true,
|
||||||
|
},
|
||||||
runtimeConfig: {
|
runtimeConfig: {
|
||||||
smtpHost: process.env.SMTP_HOST ?? "",
|
smtpHost: process.env.SMTP_HOST ?? "",
|
||||||
smtpPort: Number(process.env.SMTP_PORT ?? 465),
|
smtpPort: Number(process.env.SMTP_PORT ?? 465),
|
||||||
|
|||||||
@@ -11,11 +11,15 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@jaseeey/vue-umami-plugin": "^1.4.0",
|
"@jaseeey/vue-umami-plugin": "^1.4.0",
|
||||||
"nodemailer": "^7.0.11",
|
"nodemailer": "^7.0.11",
|
||||||
"nuxt": "^4.2.2"
|
"nuxt": "^4.2.2",
|
||||||
|
"vite-tsconfig-paths": "^6.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.1.18",
|
||||||
"@types/node": "^24.10.1",
|
"@types/node": "^24.10.1",
|
||||||
"@types/nodemailer": "^7.0.4",
|
"@types/nodemailer": "^7.0.4",
|
||||||
|
"autoprefixer": "^10.4.22",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
"typescript": "^5.9.3"
|
"typescript": "^5.9.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 445 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB |
BIN
public/background.webp
Normal file
BIN
public/background.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
@@ -1,160 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="card panel">
|
|
||||||
<h2>个人简介</h2>
|
|
||||||
<p class="muted">关于我 · About Me</p>
|
|
||||||
|
|
||||||
<div class="about-grid info-grid">
|
|
||||||
<article v-if="age" class="about-card info-card">
|
|
||||||
<div class="about-head">
|
|
||||||
<span class="icon">🎂</span>
|
|
||||||
<h3>年龄</h3>
|
|
||||||
</div>
|
|
||||||
<p class="muted">{{ age }} 岁</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article v-if="profile?.gender" class="about-card info-card">
|
|
||||||
<div class="about-head">
|
|
||||||
<span class="icon">⚧️</span>
|
|
||||||
<h3>性别</h3>
|
|
||||||
</div>
|
|
||||||
<p class="muted">{{ profile.gender }}</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article v-if="profile?.pronouns" class="about-card info-card">
|
|
||||||
<div class="about-head">
|
|
||||||
<span class="icon">🗣️</span>
|
|
||||||
<h3>代词</h3>
|
|
||||||
</div>
|
|
||||||
<p class="muted">{{ profile.pronouns }}</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article v-if="profile?.location" class="about-card info-card">
|
|
||||||
<div class="about-head">
|
|
||||||
<span class="icon">📍</span>
|
|
||||||
<h3>地区</h3>
|
|
||||||
</div>
|
|
||||||
<p class="muted">{{ profile.location }}</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="about-grid">
|
|
||||||
<article v-for="item in items" :key="item.title" class="about-card">
|
|
||||||
<div class="about-head">
|
|
||||||
<span class="icon">{{ item.icon }}</span>
|
|
||||||
<h3>{{ item.title }}</h3>
|
|
||||||
</div>
|
|
||||||
<p class="muted">{{ item.desc }}</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from "vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
items: Array,
|
|
||||||
profile: Object,
|
|
||||||
});
|
|
||||||
|
|
||||||
const age = computed(() => {
|
|
||||||
if (!props.profile?.birthday) return null;
|
|
||||||
const birthDate = new Date(props.profile.birthday);
|
|
||||||
const today = new Date();
|
|
||||||
let age = today.getFullYear() - birthDate.getFullYear();
|
|
||||||
const m = today.getMonth() - birthDate.getMonth();
|
|
||||||
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
|
|
||||||
age--;
|
|
||||||
}
|
|
||||||
return age;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.muted {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.about-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(240px, 1fr));
|
|
||||||
gap: 14px;
|
|
||||||
}
|
|
||||||
.info-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 14px;
|
|
||||||
}
|
|
||||||
.about-grid + .about-grid {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
.about-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.info-grid {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.about-card {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 12px 14px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
.info-card {
|
|
||||||
flex: 1 1 140px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
}
|
|
||||||
.info-card .about-head {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.info-card .about-head h3 {
|
|
||||||
font-size: 15px;
|
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.info-card .icon {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.info-card .muted {
|
|
||||||
margin: 0;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
.about-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
border-color: rgba(124, 193, 255, 0.4);
|
|
||||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
|
|
||||||
}
|
|
||||||
.about-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,347 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="card panel">
|
|
||||||
<h2>友情链接</h2>
|
|
||||||
<p class="muted">欢迎互换友链 · Friends</p>
|
|
||||||
<div class="actions">
|
|
||||||
<button class="primary" @click="openForm = !openForm">{{ openForm ? "收起申请" : "申请友链" }}</button>
|
|
||||||
</div>
|
|
||||||
<form v-if="openForm" class="friend-form" @submit.prevent="submitForm">
|
|
||||||
<label>
|
|
||||||
网站名称 *
|
|
||||||
<input v-model="form.name" required placeholder="Exmaple Site" />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
网站链接 *
|
|
||||||
<input v-model="form.url" type="url" required placeholder="https://example.com" />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
网站描述
|
|
||||||
<input v-model="form.desc" placeholder="可选" />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
联系邮箱 *
|
|
||||||
<input v-model="form.email" type="email" required placeholder="you@example.com" />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
头像链接
|
|
||||||
<input v-model="form.avatar" type="url" placeholder="可选，展示头像" />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
想说的话
|
|
||||||
<div class="textarea-wrapper">
|
|
||||||
<textarea v-model="form.message" placeholder="可选，最多50字" maxlength="50"></textarea>
|
|
||||||
<span class="char-count">{{ form.message?.length || 0 }}/50</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="submit" class="primary" :disabled="loading">
|
|
||||||
{{ loading ? "提交中..." : "提交申请" }}
|
|
||||||
</button>
|
|
||||||
<span class="muted" v-if="message">{{ message }}</span>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="card-grid">
|
|
||||||
<article v-for="f in displayedFriends" :key="f.url" class="info-card">
|
|
||||||
<div class="card-head">
|
|
||||||
<div class="title-wrap">
|
|
||||||
<img v-if="f.avatar" class="avatar" :src="f.avatar" :alt="f.name" loading="lazy" />
|
|
||||||
<h3>{{ f.name }}</h3>
|
|
||||||
</div>
|
|
||||||
<span class="pill tertiary">友链</span>
|
|
||||||
</div>
|
|
||||||
<p class="muted">{{ f.desc || "一个有趣的站点" }}</p>
|
|
||||||
<a :href="f.url" target="_blank" rel="noreferrer" class="link-btn">访问 →</a>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<Teleport to="body">
|
|
||||||
<div v-if="showDialog" class="dialog-backdrop" @click.self="closeDialog">
|
|
||||||
<div class="dialog-card">
|
|
||||||
<h3>{{ dialogTitle }}</h3>
|
|
||||||
<p class="muted">{{ dialogText }}</p>
|
|
||||||
<div class="dialog-actions">
|
|
||||||
<button class="primary" @click="closeDialog">好的</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { reactive, ref, watch } from "vue";
|
|
||||||
const props = defineProps({ friends: { type: Array, default: () => [] } });
|
|
||||||
const openForm = ref(false);
|
|
||||||
const loading = ref(false);
|
|
||||||
const message = ref("");
|
|
||||||
const showDialog = ref(false);
|
|
||||||
const dialogTitle = ref("");
|
|
||||||
const dialogText = ref("");
|
|
||||||
const form = reactive({
|
|
||||||
name: "",
|
|
||||||
url: "",
|
|
||||||
desc: "",
|
|
||||||
email: "",
|
|
||||||
avatar: "",
|
|
||||||
message: "",
|
|
||||||
});
|
|
||||||
const displayedFriends = ref([]);
|
|
||||||
|
|
||||||
const shuffle = (list) => {
|
|
||||||
const arr = [...list];
|
|
||||||
for (let i = arr.length - 1; i > 0; i--) {
|
|
||||||
const j = Math.floor(Math.random() * (i + 1));
|
|
||||||
[arr[i], arr[j]] = [arr[j], arr[i]];
|
|
||||||
}
|
|
||||||
return arr;
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.friends,
|
|
||||||
(val) => {
|
|
||||||
displayedFriends.value = shuffle(val || []);
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
const submitForm = async () => {
|
|
||||||
loading.value = true;
|
|
||||||
message.value = "";
|
|
||||||
try {
|
|
||||||
const resp = await fetch("/api/send-mail", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
name: form.name,
|
|
||||||
url: form.url,
|
|
||||||
desc: form.desc,
|
|
||||||
email: form.email,
|
|
||||||
avatar: form.avatar,
|
|
||||||
message: form.message,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
if (!resp.ok) throw new Error("send failed");
|
|
||||||
Object.keys(form).forEach((k) => (form[k] = ""));
|
|
||||||
message.value = "提交成功，已发送申请邮件";
|
|
||||||
openForm.value = false;
|
|
||||||
dialogTitle.value = "提交成功";
|
|
||||||
dialogText.value = "已发送申请邮件，感谢你的提交，将会尽快审核并在通过后通过邮件联系。";
|
|
||||||
showDialog.value = true;
|
|
||||||
} catch (e) {
|
|
||||||
message.value = "提交失败，请稍后重试";
|
|
||||||
dialogTitle.value = "提交失败";
|
|
||||||
dialogText.value = "邮件发送失败，请稍后重试或检查网络连接。";
|
|
||||||
showDialog.value = true;
|
|
||||||
console.error(e);
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeDialog = () => {
|
|
||||||
showDialog.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.muted {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.primary {
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(124, 193, 255, 0.5);
|
|
||||||
background: rgba(124, 193, 255, 0.12);
|
|
||||||
color: #e8eefc;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tip {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.friend-form {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(124, 193, 255, 0.06));
|
|
||||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.friend-form label {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #e8eefc;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.friend-form input {
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
||||||
background: rgba(255, 255, 255, 0.06);
|
|
||||||
color: inherit;
|
|
||||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
|
||||||
}
|
|
||||||
.textarea-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.friend-form textarea {
|
|
||||||
flex: 1;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
||||||
background: rgba(255, 255, 255, 0.06);
|
|
||||||
color: inherit;
|
|
||||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
|
||||||
font-family: inherit;
|
|
||||||
height: 36px;
|
|
||||||
resize: none;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.friend-form input::placeholder,
|
|
||||||
.friend-form textarea::placeholder {
|
|
||||||
color: rgba(232, 238, 252, 0.7);
|
|
||||||
}
|
|
||||||
.friend-form input:focus,
|
|
||||||
.friend-form textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: rgba(124, 193, 255, 0.8);
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
box-shadow: 0 0 0 2px rgba(124, 193, 255, 0.25);
|
|
||||||
}
|
|
||||||
.char-count {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(232, 238, 252, 0.6);
|
|
||||||
white-space: nowrap;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.form-actions {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.form-actions .primary {
|
|
||||||
min-width: 120px;
|
|
||||||
}
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(320px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
max-width: 1100px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
.card-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info-card {
|
|
||||||
background: linear-gradient(135deg, rgba(244, 151, 218, 0.12), rgba(255, 255, 255, 0.02));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 14px 16px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
.info-card:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
border-color: rgba(244, 151, 218, 0.55);
|
|
||||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
|
|
||||||
}
|
|
||||||
.card-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.title-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.title-wrap h3 {
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.pill {
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(244, 151, 218, 0.16);
|
|
||||||
color: #f497da;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.pill.tertiary {
|
|
||||||
background: rgba(155, 140, 252, 0.14);
|
|
||||||
color: #9b8cfc;
|
|
||||||
}
|
|
||||||
.link-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: #f497da;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.avatar {
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
||||||
}
|
|
||||||
.dialog-backdrop {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.45);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
.dialog-card {
|
|
||||||
min-width: 280px;
|
|
||||||
max-width: 420px;
|
|
||||||
background: linear-gradient(135deg, rgba(244, 151, 218, 0.12), rgba(255, 255, 255, 0.05));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 16px 18px;
|
|
||||||
box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
|
|
||||||
}
|
|
||||||
.dialog-card h3 {
|
|
||||||
margin: 0 0 8px;
|
|
||||||
}
|
|
||||||
.dialog-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,132 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="card">
|
|
||||||
<h2>GitHub</h2>
|
|
||||||
<div class="heatmap">
|
|
||||||
<h3>提交热力图</h3>
|
|
||||||
<p class="muted">我的提交热力图 · Acitivity Heatmap</p>
|
|
||||||
<img :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
|
|
||||||
</div>
|
|
||||||
<div 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="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>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from "vue";
|
|
||||||
const props = defineProps({ github: Object });
|
|
||||||
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>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.muted {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.lang-wrap {
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
.lang-chart {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.lang-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.lang-row {
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
}
|
|
||||||
.lang-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.lang-name {
|
|
||||||
color: #e8eefc;
|
|
||||||
}
|
|
||||||
.lang-percent {
|
|
||||||
color: #a8b3cf;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.lang-bar {
|
|
||||||
margin-top: 6px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.lang-bar-fill {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 999px;
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
}
|
|
||||||
.dot {
|
|
||||||
display: inline-block;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
.heatmap {
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
.heatmap img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.lang-chart {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.pie {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="card hero">
|
|
||||||
<img class="avatar" :src="profile.avatar" alt="avatar" />
|
|
||||||
<div>
|
|
||||||
<h1>{{ profile.name }}</h1>
|
|
||||||
<p class="muted">{{ profile.title }}</p>
|
|
||||||
<p>{{ profile.bio }}</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
defineProps({ profile: Object });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.hero {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 120px 1fr;
|
|
||||||
gap: 16px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.avatar {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
border: 3px solid var(--accent);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="pager">
|
|
||||||
<button :disabled="currentIndex <= 0" @click="goPrev">上一页</button>
|
|
||||||
<div class="dots">
|
|
||||||
<button
|
|
||||||
v-for="item in pages"
|
|
||||||
:key="item.name"
|
|
||||||
:class="{ active: item.name === route.name }"
|
|
||||||
@click="router.push({ name: item.name })"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button :disabled="currentIndex >= pages.length - 1" @click="goNext">下一页</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from "vue";
|
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
|
||||||
|
|
||||||
const pages = [
|
|
||||||
{ name: "index", label: "首页" },
|
|
||||||
{ name: "about", label: "关于" },
|
|
||||||
{ name: "sites", label: "网站" },
|
|
||||||
{ name: "projects", label: "项目" },
|
|
||||||
{ name: "friends", label: "友链" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const currentIndex = computed(() => pages.findIndex((item) => item.name === route.name));
|
|
||||||
|
|
||||||
const goPrev = () => {
|
|
||||||
if (currentIndex.value > 0) {
|
|
||||||
router.push({ name: pages[currentIndex.value - 1].name });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const goNext = () => {
|
|
||||||
if (currentIndex.value < pages.length - 1) {
|
|
||||||
router.push({ name: pages[currentIndex.value + 1].name });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.pager {
|
|
||||||
margin: 16px auto 24px;
|
|
||||||
max-width: 960px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto 1fr auto;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
color: inherit;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
button:disabled {
|
|
||||||
opacity: 0.45;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.dots {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.dots button {
|
|
||||||
padding: 8px 10px;
|
|
||||||
}
|
|
||||||
.dots .active {
|
|
||||||
border-color: var(--accent, #7cc1ff);
|
|
||||||
color: var(--accent, #7cc1ff);
|
|
||||||
}
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.pager {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.dots {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="card panel">
|
|
||||||
<h2>项目作品</h2>
|
|
||||||
<p class="muted">一些正在维护或已发布的项目 · Projects</p>
|
|
||||||
<div class="card-grid">
|
|
||||||
<article v-for="p in projects" :key="p.url" class="info-card">
|
|
||||||
<div class="card-head">
|
|
||||||
<h3>{{ p.name }}</h3>
|
|
||||||
<span class="pill secondary">项目</span>
|
|
||||||
</div>
|
|
||||||
<p class="muted">{{ p.desc }}</p>
|
|
||||||
<a :href="p.url" target="_blank" rel="noreferrer" class="link-btn">查看仓库 →</a>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
defineProps({ projects: Array });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.muted {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(320px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
max-width: 1100px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
.card-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info-card {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 14px 16px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
.info-card:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
border-color: rgba(255, 209, 102, 0.5);
|
|
||||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
|
|
||||||
}
|
|
||||||
.card-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.pill {
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(255, 209, 102, 0.16);
|
|
||||||
color: #ffd166;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.pill.secondary {
|
|
||||||
background: rgba(124, 193, 255, 0.14);
|
|
||||||
color: #7cc1ff;
|
|
||||||
}
|
|
||||||
.link-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: #ffd166;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="card panel">
|
|
||||||
<h2>我的网站</h2>
|
|
||||||
<p class="muted">正在运行的站点 · Websites</p>
|
|
||||||
<div class="card-grid">
|
|
||||||
<article v-for="site in sites" :key="site.url" class="info-card">
|
|
||||||
<div class="card-head">
|
|
||||||
<div class="title-wrap">
|
|
||||||
<h3>{{ site.name }}</h3>
|
|
||||||
</div>
|
|
||||||
<span class="pill">在线</span>
|
|
||||||
</div>
|
|
||||||
<p class="muted">{{ site.desc || "点击访问了解更多" }}</p>
|
|
||||||
<a :href="site.url" target="_blank" rel="noreferrer" class="link-btn">查看 →</a>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
defineProps({ sites: Array });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.muted {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(320px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
max-width: 1100px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
.card-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info-card {
|
|
||||||
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 14px 16px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
.info-card:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
border-color: rgba(124, 193, 255, 0.4);
|
|
||||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
|
|
||||||
}
|
|
||||||
.card-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.title-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.title-wrap h3 {
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.pill {
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(124, 193, 255, 0.12);
|
|
||||||
color: #7cc1ff;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.link-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: #7cc1ff;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="card panel">
|
|
||||||
<div class="head">
|
|
||||||
<h2>技能专长</h2>
|
|
||||||
<p class="muted">我常用的工具与技术 · Skills & Technologies</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid">
|
|
||||||
<article v-for="group in skills" :key="group.title" class="skill-card">
|
|
||||||
<header>
|
|
||||||
<h3>{{ group.title }}</h3>
|
|
||||||
</header>
|
|
||||||
<div class="tags">
|
|
||||||
<span v-for="item in group.items" :key="item" class="tag">
|
|
||||||
<img :src="iconSrc(item)" :alt="item" :title="item" loading="lazy" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
defineProps({ skills: { type: Array, default: () => [] } });
|
|
||||||
const iconSrc = (id) => `https://skillicons.dev/icons?i=${encodeURIComponent(id)}&theme=dark`;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.head h2 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.head p {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
}
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(260px, 1fr));
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.skill-card {
|
|
||||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 12px 14px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
.skill-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
border-color: rgba(124, 193, 255, 0.4);
|
|
||||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
|
|
||||||
}
|
|
||||||
.tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
.tag {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(124, 193, 255, 0.14);
|
|
||||||
border: 1px solid rgba(124, 193, 255, 0.18);
|
|
||||||
}
|
|
||||||
.tag img {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
289
src/styles.css
289
src/styles.css
@@ -1,289 +0,0 @@
|
|||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
color-scheme: light dark;
|
|
||||||
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
||||||
background: #0f1629;
|
|
||||||
color: #e8eefc;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100%;
|
|
||||||
background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Layout shell keeps background and toggle visible even when content is hidden */
|
|
||||||
|
|
||||||
.app-shell {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100vh;
|
|
||||||
color: #e8eefc;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
isolation: isolate;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: -1;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-stack {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-body {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #7cc1ff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
max-width: 960px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 32px 16px 48px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 18px 20px;
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 96px 1fr;
|
|
||||||
gap: 16px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.muted {
|
|
||||||
color: #a8b3cf;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chips {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chips a {
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list li {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure the Netease mini player doesn't occupy page layout space
|
|
||||||
and stays fixed above content. Use !important to override
|
|
||||||
styles injected by third-party scripts. */
|
|
||||||
.netease-mini-player {
|
|
||||||
position: fixed !important;
|
|
||||||
bottom: 20px !important;
|
|
||||||
left: 20px !important;
|
|
||||||
right: auto !important;
|
|
||||||
/* do not force width here — let the player's own minimized/expanded
|
|
||||||
styles control sizing. Only constrain max width as a safety net. */
|
|
||||||
max-width: calc(100% - 40px) !important;
|
|
||||||
z-index: 10001 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If the player injects a full-width bar, make sure it won't
|
|
||||||
push page content by forcing it out of the normal flow. */
|
|
||||||
.netease-mini-player > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Defensive: hide any accidental full-width injected container from the player
|
|
||||||
that might occupy vertical space. This targets common helper classes used
|
|
||||||
by the player script. */
|
|
||||||
.netease-mini-player-embed,
|
|
||||||
.nmpv2-player,
|
|
||||||
.nmpv2-root {
|
|
||||||
position: fixed !important;
|
|
||||||
bottom: 20px !important;
|
|
||||||
left: 20px !important;
|
|
||||||
right: auto !important;
|
|
||||||
z-index: 10001 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fix: prevent playlist dropdown from increasing document height
|
|
||||||
by forcing the playlist container to be fixed and clipped to viewport. */
|
|
||||||
.netease-mini-player[data-position="bottom-left"] .playlist-container,
|
|
||||||
.netease-mini-player[data-position="bottom-right"] .playlist-container {
|
|
||||||
position: fixed !important;
|
|
||||||
bottom: calc(20px + 80px) !important;
|
|
||||||
left: 20px !important;
|
|
||||||
right: auto !important;
|
|
||||||
width: 290px !important;
|
|
||||||
max-height: 50vh !important;
|
|
||||||
overflow: auto !important;
|
|
||||||
z-index: 10002 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.netease-mini-player[data-position="top-left"] .playlist-container,
|
|
||||||
.netease-mini-player[data-position="top-right"] .playlist-container {
|
|
||||||
position: fixed !important;
|
|
||||||
top: calc(20px + 80px) !important;
|
|
||||||
left: 20px !important;
|
|
||||||
right: auto !important;
|
|
||||||
width: 290px !important;
|
|
||||||
max-height: 50vh !important;
|
|
||||||
overflow: auto !important;
|
|
||||||
z-index: 10002 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If player is docked to the right, align playlist to right edge */
|
|
||||||
.netease-mini-player[data-position="bottom-right"] .playlist-container,
|
|
||||||
.netease-mini-player[data-position="top-right"] .playlist-container {
|
|
||||||
left: auto !important;
|
|
||||||
right: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure minimized player displays as a circle and its album cover fits */
|
|
||||||
.netease-mini-player.minimized {
|
|
||||||
width: 80px !important;
|
|
||||||
height: 80px !important;
|
|
||||||
border-radius: 50% !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.netease-mini-player.minimized .album-cover-container {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
position: absolute !important;
|
|
||||||
top: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
border-radius: 50% !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.netease-mini-player.minimized .album-cover {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
object-fit: cover !important;
|
|
||||||
border-radius: 50% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Floating background show/hide toggle (bottom-right) */
|
|
||||||
.background-toggle {
|
|
||||||
position: fixed;
|
|
||||||
right: 18px;
|
|
||||||
bottom: 18px;
|
|
||||||
z-index: 10000;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
||||||
background: rgba(255, 255, 255, 0.14);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
color: #f7fbff;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
|
|
||||||
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-toggle:hover,
|
|
||||||
.background-toggle:focus-visible {
|
|
||||||
background: rgba(124, 193, 255, 0.25);
|
|
||||||
border-color: rgba(124, 193, 255, 0.65);
|
|
||||||
box-shadow: 0 14px 36px rgba(124, 193, 255, 0.28);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-toggle:active {
|
|
||||||
transform: translateY(1px) scale(0.99);
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-toggle .toggle-icon {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-toggle .toggle-label {
|
|
||||||
font-size: 14px;
|
|
||||||
letter-spacing: 0.2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-toggle.active {
|
|
||||||
background: linear-gradient(135deg, rgba(124, 193, 255, 0.4), rgba(255, 255, 255, 0.2));
|
|
||||||
border-color: rgba(124, 193, 255, 0.8);
|
|
||||||
color: #0f1629;
|
|
||||||
box-shadow: 0 16px 42px rgba(124, 193, 255, 0.32);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.background-toggle {
|
|
||||||
right: 12px;
|
|
||||||
bottom: 12px;
|
|
||||||
padding: 9px 12px;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
.background-toggle .toggle-label {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
7
src/vite-env.d.ts
vendored
7
src/vite-env.d.ts
vendored
@@ -1,7 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
|
|
||||||
declare module "*.vue" {
|
|
||||||
import type { DefineComponent } from "vue";
|
|
||||||
const component: DefineComponent<{}, {}, any>;
|
|
||||||
export default component;
|
|
||||||
}
|
|
||||||
39
tailwind.config.ts
Normal file
39
tailwind.config.ts
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
content: ["./app/**/*.{vue,js,ts}", "./app/components/**/*.vue", "./app/pages/**/*.vue", "./app/layouts/**/*.vue"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
// 自定义颜色变量（对应现有的 CSS 变量）
|
||||||
|
primary: "rgb(124, 193, 255)",
|
||||||
|
accent: "rgb(124, 193, 255)",
|
||||||
|
"surface-primary": "rgb(15, 22, 41)",
|
||||||
|
"surface-secondary": "rgb(27, 43, 75)",
|
||||||
|
"text-primary": "rgb(232, 238, 252)",
|
||||||
|
"text-secondary": "rgb(159, 172, 200)",
|
||||||
|
"text-muted": "rgb(104, 120, 152)",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['"Inter"', "system-ui", "-apple-system", "BlinkMacSystemFont", '"Segoe UI"', "sans-serif"],
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
"safe-x": "max(1rem, env(safe-area-inset-left))",
|
||||||
|
"safe-y": "max(1rem, env(safe-area-inset-top))",
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
"sm-dark": "0 4px 12px rgba(0, 0, 0, 0.15)",
|
||||||
|
"md-dark": "0 8px 24px rgba(0, 0, 0, 0.18)",
|
||||||
|
"lg-dark": "0 12px 32px rgba(0, 0, 0, 0.22)",
|
||||||
|
"xl-dark": "0 16px 48px rgba(0, 0, 0, 0.25)",
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
"gradient-dark": "radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629)",
|
||||||
|
},
|
||||||
|
backdropBlur: {
|
||||||
|
xs: "2px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
} satisfies Config;
|
||||||
@@ -3,5 +3,8 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"types": ["node"]
|
"types": ["node"]
|
||||||
},
|
},
|
||||||
"include": ["nuxt.config.ts", "src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts", "server/**/*.ts"]
|
"vueCompilerOptions": {
|
||||||
|
"globalTypesPath": "./node_modules/.vue-global-types"
|
||||||
|
},
|
||||||
|
"include": ["nuxt.config.ts", "app/**/*.ts", "app/**/*.vue", "app/**/*.d.ts", "server/**/*.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user