feat: click avatar

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>

src/directives/index.ts

@@ -1,3 +1,7 @@
+/**
+ * 目前所有指令均未启用
+ */
+
 import { type App } from 'vue'
 // 图片点击放大指令
 import { zoom } from './zoom/zoom'

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')

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>

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>

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>
 

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> -->
+      <RouterLink :to="`/kungalgamer/${props.user.uid}/info`">
-      <a href="#"><img src="@/assets/images/topic.jpg" alt="鲲" /></a>
+        <img src="@/assets/images/topic.jpg" :alt="props.user.name" />
+      </RouterLink>
     </div>
     <!-- 发布者姓名 -->
     <div class="name">
-      <a href="#"
+      <span>{{ props.user.name }}</span>
-        ><span>{{ $props.user.name }}</span></a
-      >
     </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: 1;
-  flex-grow: 3;
   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;
-}
+  align-items: center;
-/* 发帖人昵称样式设置 */
+  span {
-.name span {
+    /* 页面缩小时省略不换行 */
-  /* 页面缩小时省略不换行 */
+    display: inline-block;
-  display: inline-block;
+    overflow: hidden;
-  overflow: hidden;
+    white-space: nowrap;
-  white-space: nowrap;
+    text-overflow: ellipsis;
-  text-overflow: ellipsis;
+    /* 颜色和字体大小 */
-  /* 颜色和字体大小 */
+    color: var(--kungalgame-font-color-3);
-  color: var(--kungalgame-font-color-3);
+    font-size: x-small;
-  font-size: x-small;
+  }
 }
 </style>

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>

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>

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>

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>
+        <RouterLink to="/">确定赞助</RouterLink>
-        <router-link to="/">返回主页</router-link>
+        <RouterLink to="/">返回主页</RouterLink>
       </div>
     </div>
     <!-- 版权 -->

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>

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>

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>

src/views/pool/components/Topic.vue

@@ -54,13 +54,15 @@ import { onMounted, watch } from 'vue'
     <!-- 话题的状态 -->
     <div class="status">
       <!-- 浏览数 -->
-      <span
+      <span>
-        ><Icon icon="ic:outline-remove-red-eye" />{{ props.data.view }}</span
+        <Icon icon="ic:outline-remove-red-eye" />
-      >
+        {{ props.data.view }}
+      </span>
       <!-- 点赞数 -->
-      <span
+      <span>
-        ><Icon icon="line-md:thumbs-up-twotone" />{{ props.data.like }}</span
+        <Icon icon="line-md:thumbs-up-twotone" />
-      >
+        {{ props.data.like }}
+      </span>
     </div>
     <!-- 发帖时间 -->
     <div class="time">

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>

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>

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>

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>

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">
           <!-- 单个评论内容区顶部 -->