jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-06 23:21:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 引入iconpark并修改部分icon

Browse Source
This commit is contained in:
Tim
2025-09-05 17:48:41 +08:00
parent f89a17f14d
commit 06dea47bec
9 changed files with 101 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend_nuxt/app.vue
View File

@@ -25,7 +25,7 @@
class="app-new-post-icon"
@click="goToNewPost"
>
<i class="fas fa-edit"></i>
<edit />
</div>
</div>
<GlobalPopups />

12
frontend_nuxt/components/CommentItem.vue
View File

@@ -15,16 +15,16 @@
<div class="common-info-content-header">
<div class="info-content-header-left">
<span class="user-name">{{ comment.userName }}</span>
<i class="fas fa-medal medal-icon"></i>
<medal-one class="medal-icon" />
<NuxtLink
v-if="comment.medal"
class="medal-name"
:to="`/users/${comment.userId}?tab=achievements`"
>{{ getMedalTitle(comment.medal) }}</NuxtLink
>
<i v-if="comment.pinned" class="fas fa-thumbtack pin-icon"></i>
<pin v-if="comment.pinned" class="pin-icon" />
<span v-if="level >= 2" class="reply-item">
<i class="fas fa-reply reply-icon"></i>
<next class="reply-icon" />
<span class="reply-info">
<BaseImage
class="reply-avatar"
@@ -40,7 +40,7 @@
<div class="info-content-header-right">
<DropdownMenu v-if="commentMenuItems.length > 0" :items="commentMenuItems">
<template #trigger>
<i class="fas fa-ellipsis-vertical action-menu-icon"></i>
<more-one class="action-menu-icon" />
</template>
</DropdownMenu>
</div>
@@ -53,10 +53,10 @@
<div class="article-footer-container">
<ReactionsGroup v-model="comment.reactions" content-type="comment" :content-id="comment.id">
<div class="make-reaction-item comment-reaction" @click="toggleEditor">
<i class="far fa-comment"></i>
<comment-icon />
</div>
<div class="make-reaction-item copy-link" @click="copyCommentLink">
<i class="fas fa-link"></i>
<link-icon />
</div>
</ReactionsGroup>
</div>

22
frontend_nuxt/components/MenuComponent.vue
View File

@@ -4,7 +4,7 @@
<div class="menu-content">
<div class="menu-item-container">
<NuxtLink class="menu-item" exact-active-class="selected" to="/" @click="handleItemClick">
<i class="menu-item-icon fas fa-hashtag"></i>
<hashtag-key class="menu-item-icon" />
<span class="menu-item-text">话题</span>
</NuxtLink>
<NuxtLink
@@ -13,7 +13,7 @@
to="/new-post"
@click="handleItemClick"
>
<i class="menu-item-icon fas fa-edit"></i>
<edit class="menu-item-icon" />
<span class="menu-item-text">发帖</span>
</NuxtLink>
<NuxtLink
@@ -22,7 +22,7 @@
to="/message"
@click="handleItemClick"
>
<i class="menu-item-icon fas fa-envelope"></i>
<remind class="menu-item-icon" />
<span class="menu-item-text">我的消息</span>
<span v-if="unreadCount > 0" class="unread-container">
<span class="unread"> {{ showUnreadCount }} </span>
@@ -34,7 +34,7 @@
to="/about"
@click="handleItemClick"
>
<i class="menu-item-icon fas fa-info-circle"></i>
<info class="menu-item-icon" />
<span class="menu-item-text">关于</span>
</NuxtLink>
<NuxtLink
@@ -43,7 +43,7 @@
to="/activities"
@click="handleItemClick"
>
<i class="menu-item-icon fas fa-gift"></i>
<gift class="menu-item-icon" />
<span class="menu-item-text">🔥 活动</span>
</NuxtLink>
<NuxtLink
@@ -53,7 +53,7 @@
to="/about/stats"
@click="handleItemClick"
>
<i class="menu-item-icon fas fa-chart-line"></i>
<chart-line class="menu-item-icon" />
<span class="menu-item-text">站点统计</span>
</NuxtLink>
<NuxtLink
@@ -63,7 +63,7 @@
to="/points"
@click="handleItemClick"
>
<i class="menu-item-icon fas fa-coins"></i>
<finance class="menu-item-icon" />
<span class="menu-item-text">
积分商城
<span v-if="myPoint !== null" class="point-count">{{ myPoint }}</span>
@@ -74,7 +74,8 @@
<div class="menu-section">
<div class="section-header" @click="categoryOpen = !categoryOpen">
<span>类别</span>
<i :class="categoryOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
<up v-if="categoryOpen" class="menu-item-icon" />
<down v-else class="menu-item-icon" />
</div>
<div v-if="categoryOpen" class="section-items">
<div v-if="isLoadingCategory" class="menu-loading-container">
@@ -107,7 +108,8 @@
<div class="menu-section">
<div class="section-header" @click="tagOpen = !tagOpen">
<span>标签</span>
<i :class="tagOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
<up v-if="tagOpen" class="menu-item-icon" />
<down v-else class="menu-item-icon" />
</div>
<div v-if="tagOpen" class="section-items">
<div v-if="isLoadingTag" class="menu-loading-container">
@@ -120,7 +122,7 @@
class="section-item-icon"
:alt="t.name"
/>
<i v-else class="section-item-icon fas fa-hashtag"></i>
<tag-one v-else class="section-item-icon" />
<span class="section-item-text"
>{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
>

2
frontend_nuxt/components/ReactionsGroup.vue
View File

@@ -19,7 +19,7 @@
</div>
<div class="reactions-viewer-item placeholder" @click="openPanel">
<i class="far fa-smile reactions-viewer-item-placeholder-icon"></i>
<face-without-mouth class="reactions-viewer-item-placeholder-icon" />
<!-- <span class="reactions-viewer-item-placeholder-text">点击以表态</span> -->
</div>
</template>

17
frontend_nuxt/nuxt.config.ts
View File

@@ -15,7 +15,12 @@ export default defineNuxtConfig({
telegramBotId: process.env.NUXT_PUBLIC_TELEGRAM_BOT_ID || '',
},
},
css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],
css: [
'vditor/dist/index.css',
'~/assets/fonts.css',
'~/assets/global.css',
'@icon-park/vue-next/styles/index.css',
],
app: {
pageTransition: { name: 'page', mode: 'out-in' },
head: {
@@ -72,11 +77,11 @@ export default defineNuxtConfig({
rel: 'manifest',
href: '/manifest.webmanifest',
},
{
rel: 'stylesheet',
href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
referrerpolicy: 'no-referrer',
},
// {
// rel: 'stylesheet',
// href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
// referrerpolicy: 'no-referrer',
// },
],
},
baseURL: '/',

17
frontend_nuxt/package-lock.json generated
View File

@@ -6,6 +6,7 @@
"": {
"name": "frontend_nuxt",
"dependencies": {
"@icon-park/vue-next": "^1.4.2",
"@nuxt/image": "^1.11.0",
"@stomp/stompjs": "^7.0.0",
"cropperjs": "^1.6.2",
@@ -25,6 +26,9 @@
"vue-echarts": "^7.0.3",
"vue-flatpickr-component": "^12.0.0",
"vue-toastification": "^2.0.0-rc.5"
},
"engines": {
"node": ">=20.0.0"
}
},
"node_modules/@ampproject/remapping": {
@@ -990,6 +994,19 @@
"integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==",
"license": "MIT"
},
"node_modules/@icon-park/vue-next": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/@icon-park/vue-next/-/vue-next-1.4.2.tgz",
"integrity": "sha512-+QklF255wkfBOabY+xw6FAI0Bwln/RhdwCunNy/9sKdKuChtaU67QZqU67KGAvZUTeeBgsL+yaHHxqfQeGZXEQ==",
"license": "Apache-2.0",
"engines": {
"node": ">= 8.0.0",
"npm": ">= 5.0.0"
},
"peerDependencies": {
"vue": "3.x"
}
},
"node_modules/@img/sharp-darwin-arm64": {
"version": "0.34.3",
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz",

1
frontend_nuxt/package.json
View File

@@ -12,6 +12,7 @@
"generate": "nuxt generate"
},
"dependencies": {
"@icon-park/vue-next": "^1.4.2",
"@nuxt/image": "^1.11.0",
"@stomp/stompjs": "^7.0.0",
"cropperjs": "^1.6.2",

12
frontend_nuxt/pages/index.vue
View File

@@ -68,13 +68,10 @@
>
<div class="article-main-container">
<NuxtLink class="article-item-title main-item" :to="`/posts/${article.id}`">
<i v-if="article.pinned" class="fas fa-thumbtack pinned-icon"></i>
<i v-if="article.type === 'LOTTERY'" class="fa-solid fa-gift lottery-icon"></i>
<i
v-else-if="article.type === 'POLL'"
class="fa-solid fa-square-poll-vertical poll-icon"
></i>
<i v-if="!article.rssExcluded" class="fa-solid fa-star featured-icon"></i>
<pin v-if="article.pinned" theme="outline" class="pinned-icon" />
<gift v-if="article.type === 'LOTTERY'" class="lottery-icon" />
<ranking-list v-else-if="article.type === 'POLL'" class="poll-icon" />
<star v-if="!article.rssExcluded" class="featured-icon" />
{{ article.title }}
</NuxtLink>
<NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
@@ -141,7 +138,6 @@ import { getToken } from '~/utils/auth'
import { stripMarkdown } from '~/utils/markdown'
import { useIsMobile } from '~/utils/screen'
import TimeManager from '~/utils/time'
useHead({
title: 'OpenIsle - 全面开源的自由社区',
meta: [

48
frontend_nuxt/plugins/iconpark.client.ts Normal file
View File

@@ -0,0 +1,48 @@
import { defineNuxtPlugin } from 'nuxt/app'
import {
Pin,
Fireworks,
Gift,
RankingList,
Star,
Edit,
HashtagKey,
Remind,
Info,
ChartLine,
Finance,
Up,
Down,
TagOne,
MedalOne,
Next,
DropDownList,
MoreOne,
Comment,
Link,
FaceWithoutMouth,
} from '@icon-park/vue-next'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('Pin', Pin)
nuxtApp.vueApp.component('Fireworks', Fireworks)
nuxtApp.vueApp.component('Gift', Gift)
nuxtApp.vueApp.component('RankingList', RankingList)
nuxtApp.vueApp.component('Star', Star)
nuxtApp.vueApp.component('Edit', Edit)
nuxtApp.vueApp.component('HashtagKey', HashtagKey)
nuxtApp.vueApp.component('Remind', Remind)
nuxtApp.vueApp.component('Info', Info)
nuxtApp.vueApp.component('ChartLine', ChartLine)
nuxtApp.vueApp.component('Finance', Finance)
nuxtApp.vueApp.component('Up', Up)
nuxtApp.vueApp.component('Down', Down)
nuxtApp.vueApp.component('TagOne', TagOne)
nuxtApp.vueApp.component('MedalOne', MedalOne)
nuxtApp.vueApp.component('Next', Next)
nuxtApp.vueApp.component('DropDownList', DropDownList)
nuxtApp.vueApp.component('MoreOne', MoreOne)
nuxtApp.vueApp.component('CommentIcon', Comment)
nuxtApp.vueApp.component('LinkIcon', Link)
nuxtApp.vueApp.component('FaceWithoutMouth', FaceWithoutMouth)
})