jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-27 21:17:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update icons

Browse Source
This commit is contained in:
tim
2025-07-12 00:28:40 +08:00
parent eda14105f2
commit 0df116918f
3 changed files with 154 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
open-isle-cli/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 116 KiB

2
open-isle-cli/public/index.html
View File

@@ -7,7 +7,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico?v=20250712">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://accounts.google.com/gsi/client" async defer></script> <script src="https://accounts.google.com/gsi/client" async defer></script>
</head> </head>

297
open-isle-cli/src/views/ProfileView.vue
View File

@@ -12,19 +12,11 @@
<div class="profile-page-header-user-info"> <div class="profile-page-header-user-info">
<div class="profile-page-header-user-info-name">{{ user.username }}</div> <div class="profile-page-header-user-info-name">{{ user.username }}</div>
<div class="profile-page-header-user-info-description">{{ user.introduction }}</div> <div class="profile-page-header-user-info-description">{{ user.introduction }}</div>
<div <div v-if="!isMine && !subscribed" class="profile-page-header-subscribe-button" @click="subscribeUser">
v-if="!isMine && !subscribed"
class="profile-page-header-subscribe-button"
@click="subscribeUser"
>
<i class="fas fa-user-plus"></i> <i class="fas fa-user-plus"></i>
关注 关注
</div> </div>
<div <div v-if="!isMine && subscribed" class="profile-page-header-unsubscribe-button" @click="unsubscribeUser">
v-if="!isMine && subscribed"
class="profile-page-header-unsubscribe-button"
@click="unsubscribeUser"
>
<i class="fas fa-user-minus"></i> <i class="fas fa-user-minus"></i>
取消关注 取消关注
</div> </div>
@@ -55,7 +47,8 @@
<i class="fas fa-clock"></i> <i class="fas fa-clock"></i>
<div class="profile-tabs-item-label">时间线</div> <div class="profile-tabs-item-label">时间线</div>
</div> </div>
<div :class="['profile-tabs-item', { selected: selectedTab === 'following' }]" @click="selectedTab = 'following'"> <div :class="['profile-tabs-item', { selected: selectedTab === 'following' }]"
@click="selectedTab = 'following'">
<i class="fas fa-user-plus"></i> <i class="fas fa-user-plus"></i>
<div class="profile-tabs-item-label">关注</div> <div class="profile-tabs-item-label">关注</div>
</div> </div>
@@ -65,148 +58,143 @@
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" /> <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
</div> </div>
<template v-else> <template v-else>
<div v-if="selectedTab === 'summary'" class="profile-summary"> <div v-if="selectedTab === 'summary'" class="profile-summary">
<div class="total-summary"> <div class="total-summary">
<div class="summary-title">统计信息</div> <div class="summary-title">统计信息</div>
<div class="total-summary-content"> <div class="total-summary-content">
<div class="total-summary-item"> <div class="total-summary-item">
<div class="total-summary-item-label">访问天数</div> <div class="total-summary-item-label">访问天数</div>
<div class="total-summary-item-value">0</div> <div class="total-summary-item-value">0</div>
</div> </div>
<div class="total-summary-item"> <div class="total-summary-item">
<div class="total-summary-item-label">已读帖子</div> <div class="total-summary-item-label">已读帖子</div>
<div class="total-summary-item-value">165k</div> <div class="total-summary-item-value">165k</div>
</div> </div>
<div class="total-summary-item"> <div class="total-summary-item">
<div class="total-summary-item-label">已送出</div> <div class="total-summary-item-label">已送出</div>
<div class="total-summary-item-value">165k</div> <div class="total-summary-item-value">165k</div>
</div> </div>
<div class="total-summary-item"> <div class="total-summary-item">
<div class="total-summary-item-label">已收到</div> <div class="total-summary-item-label">已收到</div>
<div class="total-summary-item-value">165k</div> <div class="total-summary-item-value">165k</div>
</div>
</div> </div>
</div> </div>
</div> <div class="summary-divider">
<div class="summary-divider"> <div class="hot-reply">
<div class="hot-reply"> <div class="summary-title">热门回复</div>
<div class="summary-title">热门回复</div> <div class="summary-content" v-if="hotReplies.length > 0">
<div class="summary-content" v-if="hotReplies.length > 0"> <BaseTimeline :items="hotReplies">
<BaseTimeline :items="hotReplies"> <template #item="{ item }">
<template #item="{ item }"> 在
在 <router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
<router-link {{ item.comment.post.title }}
:to="`/posts/${item.comment.post.id}`"
class="timeline-link"
>
{{ item.comment.post.title }}
</router-link>
<template v-if="item.comment.parentComment">
下对
<router-link
:to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
class="timeline-link"
>
{{ item.comment.parentComment.content }}
</router-link> </router-link>
回复了 <template v-if="item.comment.parentComment">
下对
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
class="timeline-link">
{{ item.comment.parentComment.content }}
</router-link>
回复了
</template>
<template v-else>
下评论了
</template>
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
class="timeline-link">
{{ item.comment.content }}
</router-link>
<div class="timeline-date">
{{ formatDate(item.comment.createdAt) }}
</div>
</template> </template>
<template v-else> </BaseTimeline>
下评论了 </div>
<div v-else>
<div class="summary-empty">暂无热门回复</div>
</div>
</div>
<div class="hot-topic">
<div class="summary-title">热门话题</div>
<div class="summary-content" v-if="hotPosts.length > 0">
<BaseTimeline :items="hotPosts">
<template #item="{ item }">
<router-link :to="`/posts/${item.post.id}`" class="timeline-link">
{{ item.post.title }}
</router-link>
<div class="timeline-snippet">
{{ stripMarkdown(item.post.snippet) }}
</div>
<div class="timeline-date">
{{ formatDate(item.post.createdAt) }}
</div>
</template> </template>
<router-link </BaseTimeline>
:to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" </div>
class="timeline-link" <div v-else>
> <div class="summary-empty">暂无热门话题</div>
{{ item.comment.content }} </div>
</router-link>
<div class="timeline-date">
{{ formatDate(item.comment.createdAt) }}
</div>
</template>
</BaseTimeline>
</div>
<div v-else>
<div class="summary-empty">暂无热门回复</div>
</div>
</div>
<div class="hot-topic">
<div class="summary-title">热门话题</div>
<div class="summary-content" v-if="hotPosts.length > 0">
<BaseTimeline :items="hotPosts">
<template #item="{ item }">
<router-link
:to="`/posts/${item.post.id}`"
class="timeline-link"
>
{{ item.post.title }}
</router-link>
<div class="timeline-snippet">
{{ stripMarkdown(item.post.snippet) }}
</div>
<div class="timeline-date">
{{ formatDate(item.post.createdAt) }}
</div>
</template>
</BaseTimeline>
</div>
<div v-else>
<div class="summary-empty">暂无热门话题</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div v-else-if="selectedTab === 'timeline'" class="profile-timeline"> <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
<BasePlaceholder v-if="timelineItems.length === 0" text="暂无时间线" icon="fas fa-inbox" /> <BasePlaceholder v-if="timelineItems.length === 0" text="暂无时间线" icon="fas fa-inbox" />
<BaseTimeline :items="timelineItems"> <BaseTimeline :items="timelineItems">
<template #item="{ item }"> <template #item="{ item }">
<template v-if="item.type === 'post'"> <template v-if="item.type === 'post'">
发布了文章 发布了文章
<router-link :to="`/posts/${item.post.id}`" class="timeline-link"> <router-link :to="`/posts/${item.post.id}`" class="timeline-link">
{{ item.post.title }} {{ item.post.title }}
</router-link> </router-link>
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div> <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
</template>
<template v-else-if="item.type === 'comment'">
在
<router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
{{ item.comment.post.title }}
</router-link>
下评论了
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
{{ item.comment.content }}
</router-link>
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
</template>
<template v-else-if="item.type === 'reply'">
在
<router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
{{ item.comment.post.title }}
</router-link>
下对
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
class="timeline-link">
{{ item.comment.parentComment.content }}
</router-link>
回复了
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
{{ item.comment.content }}
</router-link>
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
</template>
</template> </template>
<template v-else-if="item.type === 'comment'"> </BaseTimeline>
在 </div>
<router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
{{ item.comment.post.title }}
</router-link>
下评论了
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
{{ item.comment.content }}
</router-link>
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
</template>
<template v-else-if="item.type === 'reply'">
在
<router-link :to="`/posts/${item.comment.post.id}`" class="timeline-link">
{{ item.comment.post.title }}
</router-link>
下对
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`" class="timeline-link">
{{ item.comment.parentComment.content }}
</router-link>
回复了
<router-link :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`" class="timeline-link">
{{ item.comment.content }}
</router-link>
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
</template>
</template>
</BaseTimeline>
</div>
<div v-else class="follow-container"> <div v-else class="follow-container">
<div class="follow-tabs"> <div class="follow-tabs">
<div :class="['follow-tab-item', { selected: followTab === 'followers' } ]" @click="followTab = 'followers'">关注者</div> <div :class="['follow-tab-item', { selected: followTab === 'followers' }]"
<div :class="['follow-tab-item', { selected: followTab === 'following' } ]" @click="followTab = 'following'">正在关注</div> @click="followTab = 'followers'">关注者
</div>
<div :class="['follow-tab-item', { selected: followTab === 'following' }]"
@click="followTab = 'following'">正在关注
</div>
</div>
<div class="follow-list">
<UserList v-if="followTab === 'followers'" :users="followers" />
<UserList v-else :users="followings" />
</div>
</div> </div>
<div class="follow-list">
<UserList v-if="followTab === 'followers'" :users="followers" />
<UserList v-else :users="followings" />
</div>
</div>
</template> </template>
</div> </div>
@@ -413,16 +401,19 @@ export default {
align-items: center; align-items: center;
height: 300px; height: 300px;
} }
.profile-page { .profile-page {
background-color: var(--background-color); background-color: var(--background-color);
height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height));
overflow-y: auto; overflow-y: auto;
} }
.profile-page-header { .profile-page-header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
} }
.profile-page-header-avatar-img { .profile-page-header-avatar-img {
width: 200px; width: 200px;
height: 200px; height: 200px;
@@ -430,17 +421,21 @@ export default {
background-color: lightblue; background-color: lightblue;
object-fit: cover; object-fit: cover;
} }
.profile-page-header-user-info { .profile-page-header-user-info {
margin-left: 20px; margin-left: 20px;
} }
.profile-page-header-user-info-name { .profile-page-header-user-info-name {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
} }
.profile-page-header-user-info-description { .profile-page-header-user-info-description {
font-size: 20px; font-size: 20px;
color: #666; color: #666;
} }
.profile-page-header-subscribe-button { .profile-page-header-subscribe-button {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -484,6 +479,7 @@ export default {
border-top: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
} }
.profile-info-item { .profile-info-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -491,19 +487,23 @@ export default {
align-items: center; align-items: center;
padding: 10px 0; padding: 10px 0;
} }
.profile-info-item-label { .profile-info-item-label {
font-size: 14px; font-size: 14px;
opacity: 0.7; opacity: 0.7;
} }
.profile-info-item-value { .profile-info-item-value {
font-size: 14px; font-size: 14px;
} }
.profile-tabs { .profile-tabs {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0 20px; padding: 0 20px;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
} }
.profile-tabs-item { .profile-tabs-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -514,28 +514,34 @@ export default {
width: 200px; width: 200px;
cursor: pointer; cursor: pointer;
} }
.profile-tabs-item.selected { .profile-tabs-item.selected {
color: var(--primary-color); color: var(--primary-color);
border-bottom: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color);
} }
.profile-summary { .profile-summary {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 20px;
gap: 20px; gap: 20px;
} }
.summary-title { .summary-title {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.total-summary { .total-summary {
width: 100%; width: 100%;
} }
.total-summary-content { .total-summary-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
} }
.total-summary-item { .total-summary-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -543,14 +549,17 @@ export default {
align-items: center; align-items: center;
padding: 10px 0; padding: 10px 0;
} }
.total-summary-item-label { .total-summary-item-label {
font-size: 18px; font-size: 18px;
opacity: 0.7; opacity: 0.7;
} }
.total-summary-item-value { .total-summary-item-value {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
} }
.summary-divider { .summary-divider {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
@@ -558,10 +567,12 @@ export default {
gap: 20px; gap: 20px;
width: 100%; width: 100%;
} }
.hot-reply, .hot-reply,
.hot-topic { .hot-topic {
width: 50%; width: 50%;
} }
.profile-timeline { .profile-timeline {
padding: 20px; padding: 20px;
} }
@@ -605,8 +616,7 @@ export default {
padding: 40px 0; padding: 40px 0;
} }
.follow-container { .follow-container {}
}
.follow-tabs { .follow-tabs {
display: flex; display: flex;
@@ -628,5 +638,4 @@ export default {
.follow-list { .follow-list {
padding-left: 20px; padding-left: 20px;
} }
</style> </style>