fix: tabs ui格式统一 #710

feat: use Google emoji CDN

backend/src/main/java/com/openisle/model/ReactionType.java

@@ -6,7 +6,9 @@ package com.openisle.model;
 public enum ReactionType {
     LIKE,
     DISLIKE,
+    SMILE,
     RECOMMEND,
+    CONGRATULATIONS,
     ANGRY,
     FLUSHED,
     STAR_STRUCK,
@@ -26,5 +28,5 @@ public enum ReactionType {
     CHINA,
     USA,
     JAPAN,
-    KOREA
+    KOREA,
 }

frontend_nuxt/components/BaseTimeline.vue

@@ -8,7 +8,7 @@
       >
         <img v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
         <i v-else-if="item.icon" :class="item.icon"></i>
-        <span v-else-if="item.emoji" class="timeline-emoji">{{ item.emoji }}</span>
+        <img v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" />
       </div>
       <div class="timeline-content">
         <slot name="item" :item="item">{{ item.content }}</slot>
@@ -74,8 +74,9 @@ export default {
 }
 
 .timeline-emoji {
-  font-size: 20px;
+  width: 20px;
-  line-height: 1;
+  height: 20px;
+  object-fit: contain;
 }
 
 .timeline-item::before {

frontend_nuxt/components/ReactionsGroup.vue

@@ -3,20 +3,37 @@
     <div class="reactions-viewer">
       <div
         class="reactions-viewer-item-container"
-        @click="openPanel"
         @mouseenter="cancelHide"
         @mouseleave="scheduleHide"
       >
-        <template v-if="displayedReactions.length">
+        <template v-if="reactions.length < 4">
-          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">
+          <div
-            {{ reactionEmojiMap[r.type] }}
+            v-for="r in displayedReactions"
+            :key="r.type"
+            class="reactions-viewer-single-item"
+            :class="{ selected: userReacted(r.type) }"
+            @click="toggleReaction(r.type)"
+          >
+            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
+            <div>{{ counts[r.type] }}</div>
+          </div>
+
+          <div class="reactions-viewer-item placeholder" @click="openPanel">
+            <i class="far fa-smile"></i>
+            <!-- <span class="reactions-viewer-item-placeholder-text">点击以表态</span> -->
+          </div>
+        </template>
+        <template v-else-if="displayedReactions.length">
+          <div
+            v-for="r in displayedReactions"
+            :key="r.type"
+            class="reactions-viewer-item"
+            @click="openPanel"
+          >
+            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
           </div>
           <div class="reactions-count">{{ totalCount }}</div>
         </template>
-        <div v-else class="reactions-viewer-item placeholder">
-          <i class="far fa-smile"></i>
-          <span class="reactions-viewer-item-placeholder-text">点击以表态</span>
-        </div>
       </div>
     </div>
     <div class="make-reaction-container">
@@ -40,7 +57,9 @@
         @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }"
       >
-        {{ reactionEmojiMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
+        <img :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
+          counts[t]
+        }}</span>
       </div>
     </div>
   </div>
@@ -217,13 +236,6 @@ onMounted(async () => {
   font-size: 16px;
 }
 
-.reactions-viewer-item.placeholder {
-  opacity: 0.5;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
 .reactions-viewer-item-placeholder-text {
   font-size: 14px;
   padding-left: 5px;
@@ -262,18 +274,16 @@ onMounted(async () => {
 
 .reactions-panel {
   position: absolute;
-  bottom: 40px;
+  bottom: 50px;
-  left: -20px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
-  border-radius: 5px;
+  border-radius: 20px;
-  padding: 5px;
+  padding: 5px 10px;
-  max-width: 240px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   z-index: 10;
-  gap: 2px;
+  gap: 5px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
@@ -287,6 +297,27 @@ onMounted(async () => {
   gap: 2px;
 }
 
+.reactions-viewer-item.placeholder,
+.reactions-viewer-single-item {
+  display: flex;
+  cursor: pointer;
+  flex-direction: row;
+  padding: 2px 10px;
+  gap: 5px;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: var(--text-color);
+  align-items: center;
+}
+
+.reactions-viewer-item.placeholder,
+.reactions-viewer-single-item.selected {
+  background-color: var(--menu-selected-background-color);
+}
+
 .reaction-option.selected {
   background-color: var(--menu-selected-background-color);
 }

frontend_nuxt/pages/index.vue

@@ -652,6 +652,10 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }
 
 @container home-page (max-width: 768px) {
+  .topic-item-container {
+    margin-left: 0px;
+    gap: 0px;
+  }
   .article-main-container,
   .header-item.main-item {
     width: calc(70% - 20px);
@@ -709,6 +713,16 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 
   .topic-container {
     position: initial;
+    padding: 0;
+  }
+
+  .topic-item {
+    padding: 10px 20px;
+  }
+
+  .topic-select-container {
+    margin-left: 10px;
+    margin-top: 10px;
   }
 }
 </style>

frontend_nuxt/pages/message-box/index.vue

@@ -287,13 +287,13 @@ function goToConversation(id) {
 }
 
 .tab {
-  padding: 8px 16px;
+  padding: 10px 20px;
   cursor: pointer;
 }
 
 .tab.active {
-  font-weight: 600;
   border-bottom: 2px solid var(--primary-color);
+  color: var(--primary-color);
 }
 
 .loading-message {

frontend_nuxt/utils/reactions.js

@@ -1,25 +1,34 @@
-export const reactionEmojiMap = {
+const toCdnUrl = (emoji) => {
-  LIKE: '❤️',
+  const codepoints = Array.from(emoji)
-  DISLIKE: '👎',
+    .map((c) => c.codePointAt(0).toString(16))
-  RECOMMEND: '👏',
+    .join('_')
-  ANGRY: '😡',
+  return `https://fonts.gstatic.com/s/e/notoemoji/latest/${codepoints}/emoji.svg`
-  FLUSHED: '😳',
+}
-  STAR_STRUCK: '🤩',
+
-  ROFL: '🤣',
+export const reactionEmojiMap = {
-  HOLDING_BACK_TEARS: '🥹',
+  LIKE: toCdnUrl('❤️'),
-  MIND_BLOWN: '🤯',
+  SMILE: toCdnUrl('😁'),
-  POOP: '💩',
+  DISLIKE: toCdnUrl('👎'),
-  CLOWN: '🤡',
+  RECOMMEND: toCdnUrl('👏'),
-  SKULL: '☠️',
+  CONGRATULATIONS: toCdnUrl('🎉'),
-  FIRE: '🔥',
+  ANGRY: toCdnUrl('😡'),
-  EYES: '👀',
+  FLUSHED: toCdnUrl('😳'),
-  FROWN: '☹️',
+  STAR_STRUCK: toCdnUrl('🤩'),
-  HOT: '🥵',
+  ROFL: toCdnUrl('🤣'),
-  EAGLE: '🦅',
+  HOLDING_BACK_TEARS: toCdnUrl('🥹'),
-  SPIDER: '🕷️',
+  MIND_BLOWN: toCdnUrl('🤯'),
-  BAT: '🦇',
+  POOP: toCdnUrl('💩'),
-  CHINA: '🇨🇳',
+  CLOWN: toCdnUrl('🤡'),
-  USA: '🇺🇸',
+  SKULL: toCdnUrl('☠️'),
-  JAPAN: '🇯🇵',
+  FIRE: toCdnUrl('🔥'),
-  KOREA: '🇰🇷',
+  EYES: toCdnUrl('👀'),
+  FROWN: toCdnUrl('☹️'),
+  HOT: toCdnUrl('🥵'),
+  EAGLE: toCdnUrl('🦅'),
+  SPIDER: toCdnUrl('🕷️'),
+  BAT: toCdnUrl('🦇'),
+  CHINA: toCdnUrl('🇨🇳'),
+  USA: toCdnUrl('🇺🇸'),
+  JAPAN: toCdnUrl('🇯🇵'),
+  KOREA: toCdnUrl('🇰🇷'),
 }