admin_gitea/Home-Vue-Go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore icons and enhance technology stack

Browse Source
This commit is contained in:
admin_gitea
2026-08-04 08:46:32 +08:00
parent 36040c25e6
commit 146b6b1e6c
6 changed files with 147 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+10
View File
@@ -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
+1
View File
@@ -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
+121 -48
View File
@@ -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()]">
<i :class="tech.icon"></i>
{{ tech.name }}
<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 class="github-info">
<h3>开源地址</h3>
<div class="github-links">
<a href="https://github.com/JLinMr/Home-Vue" target="_blank" class="github-link">
<i class="fab fa-github"></i>
<a href="https://github.com/JLinMr/Home-Vue" target="_blank" rel="noopener noreferrer" class="github-link">
<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">
<i class="fas fa-times"></i>
<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 { 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: 'Vue3', icon: 'fab fa-vuejs' },
{ name: 'Vite', icon: 'fas fa-bolt' },
{ name: 'CSS3', icon: 'fab fa-css3-alt' },
{ name: 'HTML5', icon: 'fab fa-html5' },
{ name: 'JavaScript', icon: 'fab fa-js' },
// 后端技术栈
{ name: 'Go', icon: 'fab fa-golang' },
{ name: 'Gin', icon: 'fas fa-server' },
{ name: 'SQLite', icon: 'fas fa-database' },
{ name: 'Ent', icon: 'fas fa-code-branch' },
{ name: 'JWT', icon: 'fas fa-key' }
{ 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');
</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: 90%;
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-bottom: 10px;
padding: 0 40px 10px 0;
font-size: 1rem;
text-align: left;
}
.tech-stack ul,
.tech-list {
display: flex;
gap: 5px;
flex-wrap: wrap;
justify-content: center;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.tech-stack li,
.tech-item {
padding: 10px 15px;
border-radius: var(--border-radius);
min-width: 0;
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,
.tech-item i {
font-size: 1.5em;
@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;
}
}
@media (max-width: 600px) {
.tech-stack li,
.tech-item {
font-size: 0.8em;
}
.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;
right: 20px;
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;
}
}
src/components/IconPicker.vue
+7 -7
View File
@@ -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: 'media', label: '媒体', icon: 'fas fa-photo-video' },
{ name: 'social', label: '社交', icon: 'fas fa-share-nodes' },
{ 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-clock', 'fas fa-bell', 'fas fa-cog', 'fas fa-user', 'fas fa-users',
'fas fa-envelope', 'fas fa-phone', 'fas fa-location-dot', 'fas fa-calendar',
'fas fa-clock', 'fas fa-bell', 'fas fa-gear', 'fas fa-user', 'fas fa-users',
],
}
src/config/site.json
+6 -6
View File
@@ -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
View File
@@ -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';