feat: click avatar

2023-10-13 19:13:46 +08:00 · 2023-10-13 19:13:46 +08:00 · 5b31bbabe6
parent 453a3e6eb1
commit 5b31bbabe6
20 changed files with 76 additions and 74 deletions
--- 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>
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@ -1,3 +1,7 @@
+/**
+ * 目前所有指令均未启用
+ */
+
 import { type App } from 'vue'
 // 图片点击放大指令
 import { zoom } from './zoom/zoom'
--- 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')
--- 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>
--- 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>
--- 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>

--- 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,18 +61,11 @@ 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 {
+  align-items: center;
+  span {
    /* 页面缩小时省略不换行 */
    display: inline-block;
    overflow: hidden;
@ -85,4 +75,5 @@ defineProps<{
    color: var(--kungalgame-font-color-3);
    font-size: x-small;
  }
+}
 </style>
--- 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>
--- 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>
--- 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>
--- 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>
    <!-- 版权 -->
--- 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>
--- 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>
--- 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>
--- 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">
--- 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>
--- 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>
--- 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>
--- 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: -->
+      <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>
--- 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: -->
+        <RouterLink :to="`/kungalgamer/${comment.c_user.uid}/info`">
          <img src="@/assets/images/KUN.jpg" alt="KUN" />
+        </RouterLink>
        <!-- 单个评论的内容区 -->
        <div class="content">
          <!-- 单个评论内容区顶部 -->