Files
email-unlimit/frontend/src/components/AppHeader.vue
2025-07-30 18:06:20 +08:00

53 lines
1.2 KiB
Vue

<script setup>
const repoUrl = import.meta.env.VITE_REPO_URL;
const repoName = import.meta.env.VITE_REPO_NAME;
</script>
<template>
<header class="app-header">
<router-link to="/" class="logo-link">
<div class="logo">Email Unlimit</div>
</router-link>
<nav class="nav-links">
<a :href="repoUrl" target="_blank">{{ repoName }}</a>
<router-link to="/settings" class="settings-link" title="设置">
<img src="@/assets/setting.svg" alt="Settings" class="settings-icon" />
</router-link>
</nav>
</header>
</template>
<script>
export default {
name: 'AppHeader',
};
</script>
<style scoped>
.logo-link {
text-decoration: none;
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.settings-link {
display: flex;
align-items: center;
}
.settings-icon {
width: 24px;
height: 24px;
transition: filter 0.3s ease;
}
.settings-link:hover .settings-icon {
/* Generated by https://codepen.io/sosuke/pen/Pjoqqp */
/* This filter converts black to the --primary-purple color */
filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(3750%) hue-rotate(261deg) brightness(95%) contrast(94%);
}
</style>