fix: restore icons and enhance technology stack

package-lock.json

@@ -8,6 +8,7 @@
       "name": "home-vue",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "@vueuse/motion": "^2.2.5",
         "axios": "^1.7.7",
         "less": "^4.2.0",
@@ -685,6 +686,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@vueuse/motion": "^2.2.5",
     "axios": "^1.7.7",
     "less": "^4.2.0",

src/components/AboutPage.vue

@@ -5,24 +5,24 @@
         <div class="tech-stack">
           <h3>使用的技术栈</h3>
           <ul class="tech-list">
-            <li v-for="tech in techStack" :key="tech.name" :class="['tech-item', tech.name.toLowerCase()]">
+            <li v-for="tech in techStack" :key="tech.name" class="tech-item" :style="{ '--tech-color': tech.color }">
-              <i :class="tech.icon"></i>
+              <span class="tech-logo" aria-hidden="true" v-html="tech.logo"></span>
-              {{ tech.name }}
+              <span class="tech-name">{{ tech.name }}</span>
             </li>
           </ul>
         </div>
         <div class="github-info">
           <h3>开源地址</h3>
           <div class="github-links">
-            <a href="https://github.com/JLinMr/Home-Vue" target="_blank" class="github-link">
+            <a href="https://github.com/JLinMr/Home-Vue" target="_blank" rel="noopener noreferrer" class="github-link">
-              <i class="fab fa-github"></i>
+              <i class="fab fa-github" aria-hidden="true"></i>
               <div class="link-content">
                 <span class="link-title">静态原项目</span>
                 <span class="link-desc">Home-Vue</span>
               </div>
             </a>
             <a href="https://github.com/QWQLwToo/Home-Vue-go" target="_blank" rel="noopener noreferrer" class="github-link">
-              <i class="fab fa-github"></i>
+              <i class="fab fa-github" aria-hidden="true"></i>
               <div class="link-content">
                 <span class="link-title">动态现项目</span>
                 <span class="link-desc">Home-Vue-go</span>
@@ -31,92 +31,156 @@
           </div>
         </div>
       </div>
-      <button @click="closeModal" class="close-btn">
+      <button type="button" class="close-btn" aria-label="关闭关于信息" @click="closeModal">
-        <i class="fas fa-times"></i>
+        <i class="fas fa-xmark" aria-hidden="true"></i>
       </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } 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';
 
 const emit = defineEmits(['close']);
 
 const techStack = [
-  // 前端技术栈
+  { name: 'Vue 3', logo: vueLogo, color: '#42b883' },
-  { name: 'Vue3', icon: 'fab fa-vuejs' },
+  { name: 'Vite', logo: viteLogo, color: '#646cff' },
-  { name: 'Vite', icon: 'fas fa-bolt' },
+  { name: 'CSS 3', logo: cssLogo, color: '#1572b6' },
-  { name: 'CSS3', icon: 'fab fa-css3-alt' },
+  { name: 'HTML 5', logo: htmlLogo, color: '#e34f26' },
-  { name: 'HTML5', icon: 'fab fa-html5' },
+  { name: 'JavaScript', logo: javascriptLogo, color: '#c99700' },
-  { name: 'JavaScript', icon: 'fab fa-js' },
+  { name: 'Go', logo: goLogo, color: '#00add8' },
-  // 后端技术栈
+  { name: 'Gin', logo: ginLogo, color: '#3f9d98' },
-  { name: 'Go', icon: 'fab fa-golang' },
+  { name: 'SQLite', logo: sqliteLogo, color: '#0f80cc' },
-  { name: 'Gin', icon: 'fas fa-server' },
+  { name: 'Ent', logo: entLogo, color: '#77828c' },
-  { name: 'SQLite', icon: 'fas fa-database' },
+  { name: 'JWT', logo: jwtLogo, color: '#b33ac2' }
-  { name: 'Ent', icon: 'fas fa-code-branch' },
-  { name: 'JWT', icon: 'fas fa-key' }
 ];
 const closeModal = () => emit('close');
 </script>
 
 <style scoped>
 .about-page {
-  width: 500px;
+  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: 40px;
+  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) {
-    padding: 20px;
+    width: calc(100vw - 20px);
-    width: 90%;
+    max-height: calc(100dvh - 20px);
+    padding: 22px 16px;
     margin: auto;
   }
 }
 
 h3 {
+  margin: 0 0 16px;
   border-bottom: 2px solid var(--border-color);
-  padding-bottom: 10px;
+  padding: 0 40px 10px 0;
+  font-size: 1rem;
+  text-align: left;
 }
 
-.tech-stack ul,
 .tech-list {
-  display: flex;
+  display: grid;
-  gap: 5px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
-  flex-wrap: wrap;
+  gap: 8px;
-  justify-content: center;
 }
 
-.tech-stack li,
 .tech-item {
-  padding: 10px 15px;
+  min-width: 0;
-  border-radius: var(--border-radius);
+  min-height: 88px;
+  padding: 10px 6px;
+  border: 1px solid transparent;
+  border-radius: 8px;
   transition: all 0.3s ease;
   display: flex;
-  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   flex-direction: column;
 }
 
-.tech-stack li:hover,
 .tech-item:hover {
-  background-color: var(--hover-other-color);
+  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);
 }
 
-.tech-stack li i,
+@media (max-width: 600px) {
-.tech-item i {
+  .tech-list {
-  font-size: 1.5em;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-@media (max-width: 600px) {
-  .tech-stack li,
   .tech-item {
-    font-size: 0.8em;
+    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 {
@@ -133,13 +197,15 @@ h3 {
   background-color: #040404d0;
   color: white;
   padding: 15px 20px;
-  border-radius: var(--border-radius);
+  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);
   }
@@ -176,16 +242,23 @@ h3 {
 
 .close-btn {
   position: absolute;
-  top: 20px;
+  top: 12px;
-  right: 20px;
+  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;
   }
 }

src/components/IconPicker.vue

@@ -71,10 +71,10 @@ const activeCategory = ref('all')
 
 // Font Awesome 常用图标分类
 const categories = [
-  { name: 'all', label: '全部', icon: 'fas fa-th' },
+  { name: 'all', label: '全部', icon: 'fas fa-table-cells-large' },
   { name: 'web', label: '网页', icon: 'fas fa-globe' },
-  { name: 'social', label: '社交', icon: 'fas fa-share-alt' },
+  { name: 'social', label: '社交', icon: 'fas fa-share-nodes' },
-  { name: 'media', label: '媒体', icon: 'fas fa-photo-video' },
+  { name: 'media', label: '媒体', icon: 'fas fa-photo-film' },
   { name: 'business', label: '商业', icon: 'fas fa-briefcase' },
   { name: 'tech', label: '技术', icon: 'fas fa-code' },
   { name: 'other', label: '其他', icon: 'fas fa-ellipsis-h' },
@@ -83,7 +83,7 @@ const categories = [
 // 常用图标列表（按分类）
 const iconLibrary = {
   web: [
-    'fas fa-home', 'fas fa-globe', 'fas fa-link', 'fas fa-external-link-alt',
+    'fas fa-home', 'fas fa-globe', 'fas fa-link', 'fas fa-up-right-from-square',
     'fas fa-bookmark', 'fas fa-star', 'fas fa-heart', 'fas fa-thumbs-up',
   ],
   social: [
@@ -101,11 +101,11 @@ const iconLibrary = {
   ],
   tech: [
     'fas fa-code', 'fas fa-terminal', 'fas fa-server', 'fas fa-database',
-    'fas fa-cloud', 'fas fa-mobile-alt', 'fas fa-laptop', 'fas fa-keyboard',
+    'fas fa-cloud', 'fas fa-mobile-screen-button', 'fas fa-laptop', 'fas fa-keyboard',
   ],
   other: [
-    'fas fa-envelope', 'fas fa-phone', 'fas fa-map-marker-alt', 'fas fa-calendar',
+    'fas fa-envelope', 'fas fa-phone', 'fas fa-location-dot', 'fas fa-calendar',
-    'fas fa-clock', 'fas fa-bell', 'fas fa-cog', 'fas fa-user', 'fas fa-users',
+    'fas fa-clock', 'fas fa-bell', 'fas fa-gear', 'fas fa-user', 'fas fa-users',
   ],
 }
 

src/config/site.json

@@ -2,31 +2,31 @@
   {
     "name": "博客",
     "url": "https://blog.bsgun.cn",
-    "icon": "fa fa-blog"
+    "icon": "fas fa-blog"
   },
   {
     "name": "雨云",
     "url": "https://www.rainyun.com/Lin_",
-    "icon": "fa fa-cloud "
+    "icon": "fas fa-cloud"
   },
   {
     "name": "图床",
     "url": "https://dev.bsgun.cn",
-    "icon": "fa fa-image"
+    "icon": "fas fa-image"
   },
   {
     "name": "封面",
     "url": "https://cover.bsgun.cn",
-    "icon": "fa fa-panorama"
+    "icon": "fas fa-panorama"
   },
   {
     "name": "监测",
     "url": "https://status.bsgun.cn",
-    "icon": "fa fa-chart-line"
+    "icon": "fas fa-chart-line"
   },
   {
     "name": "图标",
     "url": "https://icon.bsgun.cn/",
-    "icon": "fa fa-icons"
+    "icon": "fas fa-icons"
   }
 ]

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import '@fortawesome/fontawesome-free/css/all.min.css';
 import './style.less';
 import { MotionPlugin } from '@vueuse/motion';
 import router from './router';