Home-Vue-Go/src/components/AboutPage.vue

<template>
  <div class="about-page" @click.stop>
    <div class="about-modal">
      <div class="about-modal-content">
        <header class="about-heading">
          <h2>{{ config.aboutTitle }}</h2>
          <p v-if="config.aboutDescription">{{ config.aboutDescription }}</p>
        </header>
        <div class="tech-stack">
          <h3>使用的技术栈</h3>
          <ul class="tech-list">
            <li v-for="tech in techStack" :key="tech.name" class="tech-item" :style="{ '--tech-color': tech.color }">
              <span class="tech-logo" aria-hidden="true" v-html="tech.logo"></span>
              <span class="tech-name">{{ tech.name }}</span>
            </li>
          </ul>
        </div>
        <div v-if="config.aboutLinks.length" class="github-info">
          <h3>相关链接</h3>
          <div class="github-links">
            <a
              v-for="link in config.aboutLinks"
              :key="link.url"
              :href="link.url"
              :target="config.openLinksInNewTab ? '_blank' : undefined"
              :rel="config.openLinksInNewTab ? 'noopener noreferrer' : undefined"
              class="github-link"
            >
              <i :class="link.icon || 'fas fa-link'" aria-hidden="true"></i>
              <div class="link-content">
                <span class="link-title">{{ link.title }}</span>
                <span class="link-desc">{{ link.description }}</span>
              </div>
            </a>
          </div>
        </div>
      </div>
      <button type="button" class="close-btn" aria-label="关闭关于信息" @click="closeModal">
        <i class="fas fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import vueLogo from '@fortawesome/fontawesome-free/svgs/brands/vuejs.svg?raw';
import cssLogo from '@fortawesome/fontawesome-free/svgs/brands/css3-alt.svg?raw';
import htmlLogo from '@fortawesome/fontawesome-free/svgs/brands/html5.svg?raw';
import javascriptLogo from '@fortawesome/fontawesome-free/svgs/brands/js.svg?raw';
import goLogo from '@fortawesome/fontawesome-free/svgs/brands/golang.svg?raw';
import viteLogo from '@fortawesome/fontawesome-free/svgs/solid/bolt.svg?raw';
import ginLogo from '@fortawesome/fontawesome-free/svgs/solid/server.svg?raw';
import sqliteLogo from '@fortawesome/fontawesome-free/svgs/solid/database.svg?raw';
import entLogo from '@fortawesome/fontawesome-free/svgs/solid/code-branch.svg?raw';
import jwtLogo from '@fortawesome/fontawesome-free/svgs/solid/key.svg?raw';
import { loadPublicConfig, publicConfig as config } from '../composables/usePublicConfig';

const emit = defineEmits(['close']);

const techStack = [
  { name: 'Vue 3', logo: vueLogo, color: '#42b883' },
  { name: 'Vite', logo: viteLogo, color: '#646cff' },
  { name: 'CSS 3', logo: cssLogo, color: '#1572b6' },
  { name: 'HTML 5', logo: htmlLogo, color: '#e34f26' },
  { name: 'JavaScript', logo: javascriptLogo, color: '#c99700' },
  { name: 'Go', logo: goLogo, color: '#00add8' },
  { name: 'Gin', logo: ginLogo, color: '#3f9d98' },
  { name: 'SQLite', logo: sqliteLogo, color: '#0f80cc' },
  { name: 'Ent', logo: entLogo, color: '#77828c' },
  { name: 'JWT', logo: jwtLogo, color: '#b33ac2' }
];
const closeModal = () => emit('close');
onMounted(() => loadPublicConfig());
</script>

<style scoped>
.about-page {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  backdrop-filter: blur(5px);
  background-color: rgba(var(--background-color-rgb), 0.9);
  padding: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  position: relative;
  text-align: center;
  box-sizing: border-box;
  scrollbar-gutter: stable;

  @media (max-width: 600px) {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 22px 16px;
    margin: auto;
  }
}

h3 {
  margin: 0 0 16px;
  border-bottom: 2px solid var(--border-color);
  padding: 0 40px 10px 0;
  font-size: 1rem;
  text-align: left;
}

.about-heading { margin-bottom: 22px; text-align: left; }
.about-heading h2 { margin: 0 0 7px; font-size: 1.25rem; }
.about-heading p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }

.tech-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.tech-item {
  min-width: 0;
  min-height: 88px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-direction: column;
}

.tech-item:hover {
  border-color: var(--border-color);
  background-color: var(--surface-muted);
  transform: translateY(-2px);
}

.tech-logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--tech-color);
  transition: transform 0.3s ease;
}

.tech-logo :deep(svg) {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.tech-item:hover .tech-logo {
  transform: translateY(-2px) scale(1.06);
}

.tech-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-color);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.tech-item:hover .tech-name {
  color: var(--hover-link-color);
}

@media (max-width: 600px) {
  .tech-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tech-item {
    min-height: 76px;
    padding: 8px 4px;
  }

  .tech-logo {
    width: 32px;
    height: 32px;
  }

  .tech-item:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

.github-info {
  margin-top: 24px;
}

.github-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  width: 100%;
}

.github-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #040404d0;
  color: white;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: 1;

  &:hover {
    background-color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  i {
    font-size: 1.5em;
    flex-shrink: 0;
  }

  .link-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
  }

  .link-title {
    font-size: 0.9em;
    opacity: 0.9;
  }

  .link-desc {
    font-size: 0.85em;
    opacity: 0.7;
    font-family: 'Courier New', monospace;
  }
}

@media (max-width: 600px) {
  .github-links {
    grid-template-columns: 1fr;
  }
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 1.5em;
  cursor: pointer;
  color: #7f8c8d;
  transition: color 0.3s ease;

  &:hover {
    background: var(--surface-muted);
    color: #c61b09;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.about-modal-content > div {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0;

  &:nth-child(1) { animation-delay: 0.2s; }
  &:nth-child(2) { animation-delay: 0.3s; }
}
</style>