From 480685d6d21008dea72d187a8936393126ece211 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Fri, 13 Oct 2023 19:13:46 +0800
Subject: [PATCH] feat: click avatar

---
 src/components/top-bar/KUNGalgameTopBar.vue   |  4 +-
 src/directives/index.ts                       |  4 ++
 src/main.ts                                   |  4 --
 src/views/403/403.vue                         |  2 +-
 src/views/404/404.vue                         |  2 +-
 .../article/components/SingleTopic.vue        |  4 +-
 .../content/article/components/UserPart.vue   | 53 ++++++++-----------
 .../Home/content/aside/components/Aside.vue   |  4 +-
 .../content/aside/components/AsideActive.vue  |  8 +--
 .../Home/content/aside/components/Topic.vue   |  8 +--
 src/views/donate/Donate.vue                   |  4 +-
 src/views/kungalgame/components/Aside.vue     |  4 +-
 src/views/kungalgamer/components/NavBar.vue   |  4 +-
 src/views/login/components/Register.vue       |  8 +--
 src/views/pool/components/Topic.vue           | 14 ++---
 src/views/technique/components/Tags.vue       |  4 +-
 .../topic/aside/components/TopicMaster.vue    |  2 +-
 .../topic/aside/components/TopicOtherTag.vue  |  2 +-
 .../topic/components/KUNGalgamerInfo.vue      | 11 +++-
 .../topic/components/comment/Comments.vue     |  4 +-
 20 files changed, 76 insertions(+), 74 deletions(-)

diff --git a/src/components/top-bar/KUNGalgameTopBar.vue b/src/components/top-bar/KUNGalgameTopBar.vue
index c0889ca6..c9408641 100644
--- a/src/components/top-bar/KUNGalgameTopBar.vue
+++ b/src/components/top-bar/KUNGalgameTopBar.vue
@@ -74,9 +74,9 @@ onBeforeRouteLeave(() => {
         <ul>
           <!-- 顶部单个板块 -->
           <li v-for="kun in topBarItem" :key="kun.index">
-            <router-link :to="{ path: kun.router }">
+            <RouterLink :to="{ path: kun.router }">
               {{ $tm(`header['${kun.name}']`) }}
-            </router-link>
+            </RouterLink>
           </li>
           <!-- 顶部板块下部的 hover 效果 -->
           <div class="box"></div>
diff --git a/src/directives/index.ts b/src/directives/index.ts
index 276c672b..91c44e5f 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,3 +1,7 @@
+/**
+ * 目前所有指令均未启用
+ */
+
 import { type App } from 'vue'
 // 图片点击放大指令
 import { zoom } from './zoom/zoom'
diff --git a/src/main.ts b/src/main.ts
index cc7b19fb..0a96745b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,8 +10,6 @@ import i18n from '@/language/i18n'
 import { setupRouterGuard } from '@/router/guard'
 // 引入 pinia
 import { setupPinia } from '@/store/index'
-// directives
-// import { setupKUNGalgameDirectives } from '@/directives'
 // 引入样式
 import '@/styles/index.scss'
 
@@ -22,7 +20,5 @@ const app = createApp(App)
 setupRouterGuard(router)
 // 使用 pinia
 setupPinia(app)
-// 自定义指令
-// setupKUNGalgameDirectives(app)
 
 app.use(router).use(i18n).mount('#app')
diff --git a/src/views/403/403.vue b/src/views/403/403.vue
index 17ec7e80..182ee674 100644
--- a/src/views/403/403.vue
+++ b/src/views/403/403.vue
@@ -7,7 +7,7 @@
     <div class="container">
       <p>403</p>
       <p>您没有权限访问该界面</p>
-      <button><router-link to="/kun">点击返回主页</router-link></button>
+      <button><RouterLink to="/kun">点击返回主页</RouterLink></button>
     </div>
   </div>
 </template>
diff --git a/src/views/404/404.vue b/src/views/404/404.vue
index 0a244bcf..48010070 100644
--- a/src/views/404/404.vue
+++ b/src/views/404/404.vue
@@ -7,7 +7,7 @@
     <div class="container">
       <p>404</p>
       <p>您访问了一个不存在的页面</p>
-      <button><router-link to="/kun">点击返回主页</router-link></button>
+      <button><RouterLink to="/kun">点击返回主页</RouterLink></button>
     </div>
   </div>
 </template>
diff --git a/src/views/Home/content/article/components/SingleTopic.vue b/src/views/Home/content/article/components/SingleTopic.vue
index 1ef2d5bf..6330d29a 100644
--- a/src/views/Home/content/article/components/SingleTopic.vue
+++ b/src/views/Home/content/article/components/SingleTopic.vue
@@ -13,9 +13,9 @@ const props = defineProps<{
   <div class="topic">
     <UserPart :user="props.topic.user" />
     <!-- 进入指定话题的路由 -->
-    <router-link :to="`/topic/${props.topic.tid}`">
+    <RouterLink :to="`/topic/${props.topic.tid}`">
       <TopicPart :topic="props.topic" />
-    </router-link>
+    </RouterLink>
   </div>
 </template>
 
diff --git a/src/views/Home/content/article/components/UserPart.vue b/src/views/Home/content/article/components/UserPart.vue
index 9ff668fe..8a6725aa 100644
--- a/src/views/Home/content/article/components/UserPart.vue
+++ b/src/views/Home/content/article/components/UserPart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   user: {
     uid: number
     avatar: string
@@ -14,38 +14,35 @@ defineProps<{
     <!-- 发布者头像 -->
     <div class="avatar">
       <!-- TODO: 这里换成后端的用户图片接口，我不想用 express 雕花了 -->
-      <!-- <a href="#"><img :src="$props.kungalgamer.avatar" alt="鲲" /></a> -->
-      <a href="#"><img src="@/assets/images/topic.jpg" alt="鲲" /></a>
+      <RouterLink :to="`/kungalgamer/${props.user.uid}/info`">
+        <img src="@/assets/images/topic.jpg" :alt="props.user.name" />
+      </RouterLink>
     </div>
     <!-- 发布者姓名 -->
     <div class="name">
-      <a href="#"
-        ><span>{{ $props.user.name }}</span></a
-      >
+      <span>{{ props.user.name }}</span>
     </div>
   </div>
 </template>
+
 <style lang="scss" scoped>
-/* 发帖人信息 */
 .kungalgamer {
   width: 60px;
   height: 100%;
-  /* 单个话题左右两部分发布人信息和话题概览均为竖向弹性盒 */
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  /* 发帖人信息距离话题概览的距离 */
   margin: 0 5px;
 }
+
 .avatar,
 .name {
   width: 100%;
-  height: 1px;
+  height: calc(100% - 20px);
 }
-/* 头像图片容器设置 */
+
 .avatar {
-  /* 头像部分占发布人信息区域的比例 */
-  flex-grow: 3;
+  flex-grow: 1;
   display: flex;
   justify-content: center;
   a {
@@ -64,25 +61,19 @@ defineProps<{
 
 /* 发帖人昵称位置设置 */
 .name {
-  flex-grow: 1;
+  height: 10px;
   display: flex;
-}
-.name a {
-  display: flex;
-  width: 1px;
-  flex-grow: 1;
-  align-items: center;
   justify-content: center;
-}
-/* 发帖人昵称样式设置 */
-.name span {
-  /* 页面缩小时省略不换行 */
-  display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  /* 颜色和字体大小 */
-  color: var(--kungalgame-font-color-3);
-  font-size: x-small;
+  align-items: center;
+  span {
+    /* 页面缩小时省略不换行 */
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    /* 颜色和字体大小 */
+    color: var(--kungalgame-font-color-3);
+    font-size: x-small;
+  }
 }
 </style>
diff --git a/src/views/Home/content/aside/components/Aside.vue b/src/views/Home/content/aside/components/Aside.vue
index 120f92c7..989ba012 100644
--- a/src/views/Home/content/aside/components/Aside.vue
+++ b/src/views/Home/content/aside/components/Aside.vue
@@ -7,9 +7,9 @@ import asideItem from './asideItem'
   <div class="aside">
     <!-- 顶部单个板块 -->
     <span v-for="kun in asideItem" :key="kun.index">
-      <router-link :to="{ path: kun.router }">{{
+      <RouterLink :to="{ path: kun.router }">{{
         $tm(`mainPage.asideActive['${kun.name}']`)
-      }}</router-link>
+      }}</RouterLink>
     </span>
   </div>
 </template>
diff --git a/src/views/Home/content/aside/components/AsideActive.vue b/src/views/Home/content/aside/components/AsideActive.vue
index 139641a0..16abd844 100644
--- a/src/views/Home/content/aside/components/AsideActive.vue
+++ b/src/views/Home/content/aside/components/AsideActive.vue
@@ -13,19 +13,19 @@ const props = defineProps(['isActive'])
     <!-- 发布新文章 -->
     <div class="new-article">
       <!-- 发布新文章的按钮 -->
-      <router-link to="/edit/index">
+      <RouterLink to="/edit/index">
         <button class="btn-new-article">
           {{ $tm('mainPage.asideActive.create') }}
         </button>
-      </router-link>
+      </RouterLink>
     </div>
     <!-- 功能盒子容器 -->
     <div class="item-box-container">
       <!-- 侧边栏单个项目 -->
       <span v-for="kun in asideItem" :key="kun.index">
-        <router-link :to="{ path: kun.router }">{{
+        <RouterLink :to="{ path: kun.router }">{{
           $tm(`mainPage.asideActive['${kun.name}']`)
-        }}</router-link>
+        }}</RouterLink>
       </span>
     </div>
   </div>
diff --git a/src/views/Home/content/aside/components/Topic.vue b/src/views/Home/content/aside/components/Topic.vue
index 554d4d5b..8cf8c709 100644
--- a/src/views/Home/content/aside/components/Topic.vue
+++ b/src/views/Home/content/aside/components/Topic.vue
@@ -37,7 +37,7 @@ onMounted(async () => {
     <!-- 热门话题的目录 -->
     <!-- 这里使用了父组件传过来的 isHotTopic 数据 -->
     <span class="topic-content hot-bg" v-for="kun in navHotTopic">
-      <router-link :to="{ path: `/topic/${kun.tid}` }">
+      <RouterLink :to="{ path: `/topic/${kun.tid}` }">
         <div class="topic">
           <div class="title">{{ kun.title }}</div>
           <div class="hot">
@@ -46,7 +46,7 @@ onMounted(async () => {
             <span>{{ Math.ceil(kun.popularity) }}</span>
           </div>
         </div>
-      </router-link>
+      </RouterLink>
     </span>
 
     <!-- 今日最新话题 -->
@@ -54,7 +54,7 @@ onMounted(async () => {
       {{ $tm(`mainPage.asideActive.new`) }}
     </div>
     <span class="topic-content new-bg" v-for="kun in navNewTopic">
-      <router-link :to="{ path: `/topic/${kun.tid}` }">
+      <RouterLink :to="{ path: `/topic/${kun.tid}` }">
         <div class="topic">
           <div class="title">{{ kun.title }}</div>
           <div class="new">
@@ -67,7 +67,7 @@ onMounted(async () => {
             }}</span>
           </div>
         </div>
-      </router-link>
+      </RouterLink>
     </span>
   </div>
 </template>
diff --git a/src/views/donate/Donate.vue b/src/views/donate/Donate.vue
index 274fea2d..6e7cfbb3 100644
--- a/src/views/donate/Donate.vue
+++ b/src/views/donate/Donate.vue
@@ -10,8 +10,8 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
         赞助我们<span>没有任何的萌萌点奖励</span>，不过可以帮我们缓解一部分服务器的费用，您确定要赞助吗
       </p>
       <div class="btn">
-        <router-link to="/">确定赞助</router-link>
-        <router-link to="/">返回主页</router-link>
+        <RouterLink to="/">确定赞助</RouterLink>
+        <RouterLink to="/">返回主页</RouterLink>
       </div>
     </div>
     <!-- 版权 -->
diff --git a/src/views/kungalgame/components/Aside.vue b/src/views/kungalgame/components/Aside.vue
index bfd96dfd..496df571 100644
--- a/src/views/kungalgame/components/Aside.vue
+++ b/src/views/kungalgame/components/Aside.vue
@@ -27,9 +27,9 @@ const asideBarItem: asideBar[] = [
       <li>运营理念</li>
       <li>论坛规定</li>
       <li class="skip" v-for="kun in asideBarItem" :key="kun.index">
-        <router-link style="color: #218bff" :to="{ path: kun.router }">{{
+        <RouterLink style="color: #218bff" :to="{ path: kun.router }">{{
           kun.name
-        }}</router-link>
+        }}</RouterLink>
       </li>
     </ul>
   </div>
diff --git a/src/views/kungalgamer/components/NavBar.vue b/src/views/kungalgamer/components/NavBar.vue
index 48e4e485..e04bf553 100644
--- a/src/views/kungalgamer/components/NavBar.vue
+++ b/src/views/kungalgamer/components/NavBar.vue
@@ -39,9 +39,9 @@ onMounted(() => {
       :class="activeClass(currentPageUid, kun.router)"
       v-show="isShowNavItem(kun.permission)"
     >
-      <router-link :to="`/kungalgamer/${currentPageUid}/${kun.router}`">
+      <RouterLink :to="`/kungalgamer/${currentPageUid}/${kun.router}`">
         <span>{{ kun.name }}</span>
-      </router-link>
+      </RouterLink>
     </div>
   </div>
 </template>
diff --git a/src/views/login/components/Register.vue b/src/views/login/components/Register.vue
index d6e0da67..ebd97baa 100644
--- a/src/views/login/components/Register.vue
+++ b/src/views/login/components/Register.vue
@@ -181,13 +181,13 @@ const handleRegister = async () => {
 
         <!-- 用户协议和隐私政策 -->
         <div class="licence">
-          <router-link to="/agreement">
+          <RouterLink to="/agreement">
             <span>{{ $tm('login.register.agreement') }}</span>
-          </router-link>
+          </RouterLink>
           {{ $tm('login.register.and') }}
-          <router-link to="/privacy">
+          <RouterLink to="/privacy">
             <span>{{ $tm('login.register.privacy') }}</span>
-          </router-link>
+          </RouterLink>
         </div>
       </span>
     </div>
diff --git a/src/views/pool/components/Topic.vue b/src/views/pool/components/Topic.vue
index 4b42fd99..72b2c133 100644
--- a/src/views/pool/components/Topic.vue
+++ b/src/views/pool/components/Topic.vue
@@ -54,13 +54,15 @@ import { onMounted, watch } from 'vue'
     <!-- 话题的状态 -->
     <div class="status">
       <!-- 浏览数 -->
-      <span
-        ><Icon icon="ic:outline-remove-red-eye" />{{ props.data.view }}</span
-      >
+      <span>
+        <Icon icon="ic:outline-remove-red-eye" />
+        {{ props.data.view }}
+      </span>
       <!-- 点赞数 -->
-      <span
-        ><Icon icon="line-md:thumbs-up-twotone" />{{ props.data.like }}</span
-      >
+      <span>
+        <Icon icon="line-md:thumbs-up-twotone" />
+        {{ props.data.like }}
+      </span>
     </div>
     <!-- 发帖时间 -->
     <div class="time">
diff --git a/src/views/technique/components/Tags.vue b/src/views/technique/components/Tags.vue
index 14e532e3..610b9948 100644
--- a/src/views/technique/components/Tags.vue
+++ b/src/views/technique/components/Tags.vue
@@ -12,9 +12,9 @@ import { tagsList } from './tags'
     <ul class="tags">
       <!-- 单个标签，最大输入文字为 10 个 -->
       <li v-for="kun in tagsList" :key="kun.index">
-        <Icon class="icon" icon="ant-design:tag-twotone" /><router-link
+        <Icon class="icon" icon="ant-design:tag-twotone" /><RouterLink
           :to="kun.router"
-          >{{ kun.data }}</router-link
+          >{{ kun.data }}</RouterLink
         >
       </li>
     </ul>
diff --git a/src/views/topic/aside/components/TopicMaster.vue b/src/views/topic/aside/components/TopicMaster.vue
index 8014da69..79ba0c81 100644
--- a/src/views/topic/aside/components/TopicMaster.vue
+++ b/src/views/topic/aside/components/TopicMaster.vue
@@ -38,7 +38,7 @@ onMounted(async () => {
       {{ $tm('topic.aside.master') }}
     </div>
     <div class="topic" v-for="(kun, index) in topicData" :key="index">
-      <router-link :to="`/topic/${kun.tid}`">{{ kun.title }}</router-link>
+      <RouterLink :to="`/topic/${kun.tid}`">{{ kun.title }}</RouterLink>
     </div>
   </div>
 </template>
diff --git a/src/views/topic/aside/components/TopicOtherTag.vue b/src/views/topic/aside/components/TopicOtherTag.vue
index a436424c..6a9506ec 100644
--- a/src/views/topic/aside/components/TopicOtherTag.vue
+++ b/src/views/topic/aside/components/TopicOtherTag.vue
@@ -43,7 +43,7 @@ onMounted(async () => {
       {{ $tm('topic.aside.tags') }}
     </div>
     <div class="topic" v-for="(kun, index) in topicData" :key="index">
-      <router-link :to="`/topic/${kun.tid}`">{{ kun.title }}</router-link>
+      <RouterLink :to="`/topic/${kun.tid}`">{{ kun.title }}</RouterLink>
     </div>
   </div>
 </template>
diff --git a/src/views/topic/components/KUNGalgamerInfo.vue b/src/views/topic/components/KUNGalgamerInfo.vue
index e6d7d0c3..d4bdf246 100644
--- a/src/views/topic/components/KUNGalgamerInfo.vue
+++ b/src/views/topic/components/KUNGalgamerInfo.vue
@@ -1,5 +1,6 @@
 <!-- 这个部分为发帖人的个人信息展示部分 -->
 <script setup lang="ts">
+import { computed } from 'vue'
 const props = defineProps<{
   user: {
     uid: number
@@ -8,6 +9,8 @@ const props = defineProps<{
     moemoepoint: number
   }
 }>()
+
+const user = computed(() => props.user)
 </script>
 
 <template>
@@ -16,11 +19,15 @@ const props = defineProps<{
     <!-- 头像 -->
     <div class="avatar">
       <!-- 头像图片 TODO: -->
-      <img src="@/assets/images/KUN.jpg" alt="KUN" />
+      <RouterLink :to="`/kungalgamer/${user.uid}/info`">
+        <img src="@/assets/images/KUN.jpg" alt="KUN" />
+      </RouterLink>
     </div>
     <div class="info">
       <!-- 名字 -->
-      <div class="name">{{ user.name }}</div>
+      <div class="name">
+        {{ user.name }}
+      </div>
       <!-- 萌萌点 -->
       <div class="moemoepoint">{{ user.moemoepoint }}</div>
     </div>
diff --git a/src/views/topic/components/comment/Comments.vue b/src/views/topic/components/comment/Comments.vue
index d953c5d9..26a55090 100644
--- a/src/views/topic/components/comment/Comments.vue
+++ b/src/views/topic/components/comment/Comments.vue
@@ -104,7 +104,9 @@ const handleClickComment = (
         :key="index"
       >
         <!-- 用户头像 TODO: -->
-        <img src="@/assets/images/KUN.jpg" alt="KUN" />
+        <RouterLink :to="`/kungalgamer/${comment.c_user.uid}/info`">
+          <img src="@/assets/images/KUN.jpg" alt="KUN" />
+        </RouterLink>
         <!-- 单个评论的内容区 -->
         <div class="content">
           <!-- 单个评论内容区顶部 -->