feat: add floating new message indicator

Article UI fixes

frontend_nuxt/.env.production.example

@@ -1,10 +1,10 @@
 
 ; 生产环境后端
-NUXT_PUBLIC_API_BASE_URL=https://open-isle.com
+NUXT_PUBLIC_API_BASE_URL=https://www.open-isle.com
 ; 正式环境/生产环境
-NUXT_PUBLIC_WEBSITE_BASE_URL=https://open-isle.com
+NUXT_PUBLIC_WEBSITE_BASE_URL=https://www.open-isle.com
 ; 生产环境ws后端
-NUXT_PUBLIC_WEBSOCKET_URL=https://open-isle.com/websocket
+NUXT_PUBLIC_WEBSOCKET_URL=https://www.open-isle.com/websocket
 
 NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com
 NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ

frontend_nuxt/assets/global.css

@@ -18,7 +18,9 @@
   --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(242, 242, 242, 0.884);
+  --menu-selected-background-color: rgba(88, 241, 255, 0.166);
+  --normal-light-background-color: rgba(242, 242, 242, 0.884);
+  --menu-selected-background-color-hover: rgba(242, 242, 242, 0.884);
   --menu-text-color: rgb(99, 99, 99);
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   /* --normal-background-color: rgb(241, 241, 241); */
@@ -58,6 +60,8 @@
   --menu-border-color: #555;
   --normal-border-color: #555;
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
+  --normal-light-background-color: rgba(255, 255, 255, 0.1);
+  --menu-selected-background-color-hover: rgba(17, 182, 197, 0.082);
   --menu-text-color: rgb(173, 173, 173);
   /* --normal-background-color: #000000; */
   --normal-background-color: #333;
@@ -162,7 +166,7 @@ body {
   padding-left: 1em;
   border-left: 4px solid #d0d7de;
   color: var(--blockquote-text-color);
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
   padding-top: 1px;
   padding-bottom: 1px;
 }
@@ -295,7 +299,7 @@ body {
 
 /* 鼠标悬停行高亮 */
 .info-content-text tbody tr:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
   transition: background-color 0.2s ease;
 }
 

frontend_nuxt/components/ArticleCategory.vue

@@ -2,11 +2,12 @@
   <div class="article-category-container" v-if="category">
     <div class="article-info-item" @click="gotoCategory">
       <BaseImage
-        v-if="category.smallIcon"
+        v-if="isImageIcon(category.smallIcon)"
         class="article-info-item-img"
         :src="category.smallIcon"
         :alt="category.name"
       />
+      <component v-else :is="category.smallIcon || category.icon" class="article-info-item-img" />
       <div class="article-info-item-text">{{ category.name }}</div>
     </div>
   </div>
@@ -22,6 +23,11 @@ const gotoCategory = async () => {
   const value = encodeURIComponent(props.category.id ?? props.category.name)
   await navigateTo({ path: '/', query: { category: value } }, { replace: true })
 }
+
+const isImageIcon = (icon) => {
+  if (!icon) return false
+  return /^https?:\/\//.test(icon) || icon.startsWith('/')
+}
 </script>
 
 <style scoped>

frontend_nuxt/components/ArticleTags.vue

@@ -7,11 +7,17 @@
       @click="gotoTag(tag)"
     >
       <BaseImage
-        v-if="tag.smallIcon"
+        v-if="isImageIcon(tag.smallIcon)"
         class="article-info-item-img"
         :src="tag.smallIcon"
         :alt="tag.name"
       />
+      <component
+        v-else-if="tag.smallIcon || tag.icon"
+        :is="tag.smallIcon || tag.icon"
+        class="article-info-item-img"
+      />
+      <tag-one v-else class="article-info-item-img" />
       <div class="article-info-item-text">{{ tag.name }}</div>
     </div>
   </div>
@@ -26,6 +32,11 @@ const gotoTag = async (tag) => {
   const value = encodeURIComponent(tag.id ?? tag.name)
   await navigateTo({ path: '/', query: { tags: value } }, { replace: true })
 }
+
+const isImageIcon = (icon) => {
+  if (!icon) return false
+  return /^https?:\/\//.test(icon) || icon.startsWith('/')
+}
 </script>
 
 <style scoped>

frontend_nuxt/components/CategorySelect.vue

@@ -15,7 +15,7 @@
               class="option-icon"
               :alt="option.name"
             />
-            <!-- <i v-else :class="['option-icon', option.icon]"></i> -->
+            <component v-else :is="option.smallIcon || option.icon" class="option-icon" />
           </template>
           <span>{{ option.name }}</span>
           <span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>

frontend_nuxt/components/CommentItem.vue

@@ -404,7 +404,6 @@ const handleContentClick = (e) => {
   margin-left: 10px;
   margin-right: 10px;
   opacity: 0.5;
-  transform: scaleX(-1);
 }
 
 .reply-user-name {

frontend_nuxt/components/HeaderComponent.vue

@@ -4,7 +4,9 @@
       <div class="header-content-left">
         <div v-if="showMenuBtn" class="menu-btn-wrapper">
           <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
-            <application-menu class="micon"></application-menu>
+            <ToolTip content="展开/收起菜单" placement="bottom">
+              <application-menu class="micon"></application-menu>
+            </ToolTip>
           </button>
           <span
             v-if="isMobile && (unreadMessageCount > 0 || hasChannelUnread)"

frontend_nuxt/components/MenuComponent.vue

@@ -122,6 +122,11 @@
                 class="section-item-icon"
                 :alt="t.name"
               />
+              <component
+                v-else-if="t.smallIcon || t.icon"
+                :is="t.smallIcon || t.icon"
+                class="section-item-icon"
+              />
               <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
@@ -311,6 +316,10 @@ const gotoTag = (t) => {
   align-items: center;
 }
 
+.menu-item:hover {
+  background-color: var(--menu-selected-background-color-hover);
+}
+
 .menu-item.selected {
   font-weight: bold;
   background-color: var(--menu-selected-background-color);
@@ -402,7 +411,7 @@ const gotoTag = (t) => {
 }
 
 .section-item:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--menu-selected-background-color-hover);
 }
 
 .section-item-text-count {

frontend_nuxt/components/PostEditor.vue

@@ -136,7 +136,7 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: var(--menu-selected-background-color);
+  background: var(--normal-light-background-color);
   display: flex;
   align-items: center;
   justify-content: center;

frontend_nuxt/components/ReactionsGroup.vue

@@ -331,11 +331,11 @@ onMounted(async () => {
 
 .reactions-viewer-item.placeholder,
 .reactions-viewer-single-item.selected {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 .reaction-option.selected {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 @media (max-width: 768px) {

frontend_nuxt/pages/index.vue

@@ -65,16 +65,17 @@
           class="article-item"
           v-for="article in articles"
           :key="article.id"
+          @click="navigateTo(`/posts/${article.id}`)"
         >
           <div class="article-main-container">
-            <NuxtLink class="article-item-title main-item" :to="`/posts/${article.id}`">
+            <NuxtLink class="article-item-title main-item">
               <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}`">
+            <NuxtLink class="article-item-description main-item">
               {{ sanitizeDescription(article.description) }}
             </NuxtLink>
             <div class="article-info-container main-item">
@@ -488,6 +489,11 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   border-bottom: 1px solid var(--normal-border-color);
 }
 
+.article-item:hover {
+  background-color: var(--menu-selected-background-color-hover);
+  cursor: pointer;
+}
+
 .article-main-container,
 .header-item.main-item {
   width: calc(60% - 20px);
@@ -529,7 +535,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }
 
 .article-item-title {
-  margin-top: 10px;
+  margin-top: 15px;
   font-size: 18px;
   text-decoration: none;
   color: var(--text-color);
@@ -558,7 +564,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 
 .article-item-description {
   max-width: 100%;
-  margin-top: 10px;
+  margin-top: 5px;
   font-size: 13px;
   color: rgba(140, 140, 140, 0.888);
   display: -webkit-box;
@@ -605,6 +611,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  padding-bottom: 5px;
 }
 
 .article-member-avatars-container {
@@ -719,10 +726,15 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   }
 
   .article-item-title {
+    margin-top: 10px;
     font-size: 16px;
     font-weight: bold;
   }
 
+  .article-main-container {
+    padding-bottom: 0px;
+  }
+
   .article-item-description {
     margin-top: 2px;
     font-size: 10px;

frontend_nuxt/pages/message-box/[id].vue

@@ -36,7 +36,11 @@
               </div>
             </div>
             <div v-if="item.replyTo" class="reply-preview info-content-text">
-              <div class="reply-author">{{ item.replyTo.sender.username }}</div>
+              <div class="reply-header">
+                <next class="reply-icon" />
+                <BaseImage class="reply-avatar" :src="item.replyTo.sender.avatar" alt="avatar" />
+                <div class="reply-author">{{ item.replyTo.sender.username }}:</div>
+              </div>
               <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
             </div>
             <div class="message-content">
@@ -48,7 +52,7 @@
               :content-id="item.id"
               @update:modelValue="(v) => (item.reactions = v)"
             >
-              <div class="reply-btn"><next @click="setReply(item)" /> 写个回复...</div>
+              <div @click="setReply(item)" class="reply-btn"><next /> 写个回复...</div>
             </ReactionsGroup>
           </template>
         </BaseTimeline>
@@ -63,11 +67,21 @@
     </div>
 
     <div class="message-input-area">
+      <div
+        v-if="newMessagesCount > 0 && !isUserNearBottom"
+        class="new-message-container"
+        @click="handleScrollToBottom"
+      >
+        <double-down />
+        <div class="new-message-count">有{{ newMessagesCount }}条新消息</div>
+      </div>
+
       <div v-if="replyTo" class="active-reply">
         正在回复 {{ replyTo.sender.username }}:
         {{ stripMarkdownLength(replyTo.content, 50) }}
         <close-icon class="close-reply" @click="replyTo = null" />
       </div>
+
       <MessageEditor :loading="sending" @submit="sendMessage" />
     </div>
   </div>
@@ -120,6 +134,7 @@ const isChannel = ref(false)
 const isFloatMode = computed(() => route.query.float !== undefined)
 const floatRoute = useState('messageFloatRoute')
 const replyTo = ref(null)
+const newMessagesCount = ref(0)
 
 const isUserNearBottom = ref(true)
 function updateNearBottom() {
@@ -127,6 +142,9 @@ function updateNearBottom() {
   if (!el) return
   const threshold = 40 // px
   isUserNearBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold
+  if (isUserNearBottom.value) {
+    newMessagesCount.value = 0
+  }
 }
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
@@ -170,6 +188,11 @@ function scrollToBottomInstant() {
   el.scrollTop = el.scrollHeight
 }
 
+function handleScrollToBottom() {
+  scrollToBottomSmooth()
+  newMessagesCount.value = 0
+}
+
 async function fetchMessages(page = 0) {
   if (page === 0) {
     loading.value = true
@@ -301,6 +324,7 @@ async function sendMessage(content, clearInput) {
     await nextTick()
     // 仅“发送消息成功后”才平滑滚动到底部
     scrollToBottomSmooth()
+    newMessagesCount.value = 0
   } catch (e) {
     toast.error(e.message)
   } finally {
@@ -373,6 +397,8 @@ const subscribeToConversation = () => {
 
       if (isUserNearBottom.value) {
         scrollToBottomSmooth()
+      } else {
+        newMessagesCount.value += 1
       }
     } catch (e) {
       console.error('Failed to parse websocket message', e)
@@ -454,7 +480,6 @@ function goBack() {
 }
 
 .chat-container.float {
-  height: 100vh;
 }
 
 .chat-header {
@@ -555,6 +580,25 @@ function goBack() {
   gap: 10px;
 }
 
+.new-message-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 20px;
+  padding: 3px 6px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  width: fit-content;
+  position: absolute;
+  bottom: calc(100% + 20px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  background-color: var(--background-color);
+}
+
 .user-name {
   font-size: 14px;
   font-weight: 600;
@@ -585,11 +629,6 @@ function goBack() {
   border-bottom-left-radius: 4px;
 }
 
-.message-input-area {
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
 .loading-container {
   display: flex;
   justify-content: center;
@@ -606,6 +645,19 @@ function goBack() {
 .message-input-area {
   margin-left: 10px;
   margin-right: 10px;
+  position: relative;
+}
+
+.reply-icon {
+  color: var(--primary-color);
+  margin-right: 5px;
+}
+
+.reply-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 5px;
 }
 
 .reply-preview {
@@ -614,12 +666,19 @@ function goBack() {
   border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;
   font-size: 13px;
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
+}
+
+.reply-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .reply-author {
   font-weight: bold;
   margin-bottom: 2px;
+  opacity: 0.5;
 }
 
 .reply-btn {
@@ -634,7 +693,7 @@ function goBack() {
 }
 
 .active-reply {
-  background-color: var(--bg-color-soft);
+  background-color: var(--normal-light-background-color);
   padding: 5px 10px;
   border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;

frontend_nuxt/pages/message-box/index.vue

@@ -419,7 +419,7 @@ function minimize() {
 }
 
 .conversation-item:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 .conversation-avatar {

frontend_nuxt/plugins/iconpark.client.ts

@@ -63,6 +63,17 @@ import {
   History,
   Lightning,
   PeoplesTwo,
+  Code,
+  GoodTwo,
+  Twitter,
+  Bitcoin,
+  Fire,
+  Communication,
+  WaterLevel,
+  RobotOne,
+  Server,
+  Protection,
+  DoubleDown,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -129,4 +140,15 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('HistoryIcon', History)
   nuxtApp.vueApp.component('Lightning', Lightning)
   nuxtApp.vueApp.component('PeoplesTwo', PeoplesTwo)
+  nuxtApp.vueApp.component('CodeIcon', Code)
+  nuxtApp.vueApp.component('GoodTwo', GoodTwo)
+  nuxtApp.vueApp.component('Twitter', Twitter)
+  nuxtApp.vueApp.component('Bitcoin', Bitcoin)
+  nuxtApp.vueApp.component('Fire', Fire)
+  nuxtApp.vueApp.component('Communication', Communication)
+  nuxtApp.vueApp.component('WaterLevel', WaterLevel)
+  nuxtApp.vueApp.component('RobotOne', RobotOne)
+  nuxtApp.vueApp.component('ServerIcon', Server)
+  nuxtApp.vueApp.component('Protection', Protection)
+  nuxtApp.vueApp.component('DoubleDown', DoubleDown)
 })