feat: moemoepoint icon, some styles

src/components/top-bar/KUNGalgameUserInfo.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 // 全局消息组件（顶部）
@@ -60,7 +61,8 @@ onMounted(() => {
       <div class="info">
         <p>{{ name }}</p>
         <p>
-          MP: <span>{{ moemoepoint }}</span>
+          <span><Icon icon="line-md:star-alt-twotone"></Icon></span>
+          <span>{{ moemoepoint }}</span>
         </p>
       </div>
       <div class="func">
@@ -124,9 +126,16 @@ onMounted(() => {
     justify-content: center;
     align-items: center;
     span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       margin-left: 5px;
       font-weight: bold;
       color: var(--kungalgame-pink-4);
+
+      &:nth-child(1) {
+        font-size: 20px;
+      }
     }
   }
 }

src/views/Home/content/aside/components/Aside.vue

@@ -21,6 +21,7 @@ import asideItem from './asideItem'
   justify-content: space-around;
   align-items: center;
   border: 1px solid var(--kungalgame-blue-4);
+  border-radius: 5px;
   span {
     width: 100%;
     height: 1px;
@@ -32,7 +33,7 @@ import asideItem from './asideItem'
     }
     &:hover {
       transition: 0.2s;
-      background-color: var(--kungalgame-trans-blue-2);
+      background-color: var(--kungalgame-trans-blue-1);
     }
     a {
       writing-mode: vertical-lr;

src/views/Home/content/aside/components/AsideActive.vue

@@ -13,7 +13,7 @@ const props = defineProps(['isActive'])
     <!-- 发布新文章 -->
     <div class="new-article">
       <!-- 发布新文章的按钮 -->
-      <RouterLink to="/edit/index">
+      <RouterLink to="/edit">
         <button class="btn-new-article">
           {{ $tm('mainPage.asideActive.create') }}
         </button>
@@ -50,21 +50,13 @@ const props = defineProps(['isActive'])
   button {
     height: 100%;
     width: 100%;
-    background-color: var(--kungalgame-red-0);
+    background-color: var(--kungalgame-trans-red-0);
     border: 1px solid var(--kungalgame-red-3);
     border-radius: 5px;
     cursor: pointer;
     color: var(--kungalgame-red-3);
     font-weight: bold;
     font-size: larger;
-    /* 发布按钮 hover 效果 */
-    &:hover {
-      font-size: xx-large;
-      background-color: var(--kungalgame-red-3);
-      color: var(--kungalgame-red-0);
-      /* 效果过渡时长 */
-      transition: 0.3s;
-    }
   }
 }
 /* 功能区容器 */

src/views/kungalgamer/components/Header.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import { computed, ref, watchEffect } from 'vue'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import { storeToRefs } from 'pinia'
@@ -51,7 +52,10 @@ const mpWidth = computed(() => {
       <Transition name="progress">
         <div class="mp-progress"></div>
       </Transition>
-      <span>MP: {{ props.moemoepoint }}</span>
+      <p>
+        <span><Icon icon="line-md:star-alt-twotone"></Icon></span>
+        <span>{{ props.moemoepoint }}</span>
+      </p>
     </div>
   </div>
 </template>
@@ -137,12 +141,25 @@ const mpWidth = computed(() => {
   display: flex;
   align-items: center;
   z-index: 1;
-  span {
+  p {
     position: absolute;
     right: 0;
     font-size: 17px;
     padding-right: 20px;
     font-style: italic;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--kungalgame-pink-4);
+      &:nth-child(1) {
+        font-size: 20px;
+      }
+    }
   }
 }
 /* 用户的萌萌点进度 */

src/views/topic/components/KUNGalgamerInfo.vue

@@ -1,5 +1,6 @@
 <!-- 这个部分为发帖人的个人信息展示部分 -->
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 const props = defineProps<{
   user: {
@@ -29,7 +30,10 @@ const user = computed(() => props.user)
         {{ user.name }}
       </div>
       <!-- 萌萌点 -->
-      <div class="moemoepoint">{{ user.moemoepoint }}</div>
+      <div class="moemoepoint">
+        <span><Icon icon="line-md:star-alt-twotone"></Icon></span>
+        <span>{{ user.moemoepoint }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -65,6 +69,18 @@ const user = computed(() => props.user)
   margin-top: 10px;
   display: flex;
   justify-content: center;
+  align-items: center;
+  color: var(--kungalgame-pink-4);
+
+  span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:nth-child(1) {
+      font-size: 20px;
+    }
+  }
 }
 
 @media (max-width: 700px) {

src/views/topic/components/comment/Comments.vue

@@ -103,9 +103,13 @@ const handleClickComment = (
         v-for="(comment, index) in commentsData"
         :key="index"
       >
-        <!-- 用户头像 TODO: -->
+        <!-- 用户头像 -->
         <RouterLink :to="`/kungalgamer/${comment.c_user.uid}/info`">
-          <img src="@/assets/images/KUN.jpg" alt="KUN" />
+          <!-- 这里用的是压缩过后的头像 -->
+          <img
+            :src="comment.c_user.avatar.replace(/\.webp$/, '-100.webp')"
+            alt="KUN"
+          />
         </RouterLink>
         <!-- 单个评论的内容区 -->
         <div class="content">