hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

feat: click avatar

Browse source
This commit is contained in:
KUN1007 2023-10-13 19:13:46 +08:00
parent 453a3e6eb1
commit 5b31bbabe6
20 changed files with 76 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/top-bar/KUNGalgameTopBar.vue
View file

@ -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>

4
src/directives/index.ts
View file

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

4
src/main.ts
View file

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

2
src/views/403/403.vue
View file

@ -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>

2
src/views/404/404.vue
View file

@ -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>

4
src/views/Home/content/article/components/SingleTopic.vue
View file

@ -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>

37
src/views/Home/content/article/components/UserPart.vue
View file

@ -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;
@ -84,5 +74,6 @@ defineProps<{
/* 颜色和字体大小 */
color: var(--kungalgame-font-color-3);
font-size: x-small;
}
}
</style>

4
src/views/Home/content/aside/components/Aside.vue
View file

@ -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>

8
src/views/Home/content/aside/components/AsideActive.vue
View file

@ -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>

8
src/views/Home/content/aside/components/Topic.vue
View file

@ -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>

4
src/views/donate/Donate.vue
View file

@ -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>
<!-- 版权 -->

4
src/views/kungalgame/components/Aside.vue
View file

@ -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>

4
src/views/kungalgamer/components/NavBar.vue
View file

@ -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>

8
src/views/login/components/Register.vue
View file

@ -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>

14
src/views/pool/components/Topic.vue
View file

@ -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">

4
src/views/technique/components/Tags.vue
View file

@ -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>

2
src/views/topic/aside/components/TopicMaster.vue
View file

@ -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>

2
src/views/topic/aside/components/TopicOtherTag.vue
View file

@ -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>

9
src/views/topic/components/KUNGalgamerInfo.vue
View file

@ -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>

2
src/views/topic/components/comment/Comments.vue
View file

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