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

BUG: topic master router

Browse source
This commit is contained in:
KUN1007 2023-09-12 21:09:46 +08:00
parent fb3fda0d28
commit 17af91b60d
11 changed files with 207 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/api/index.ts
View file

@ -8,6 +8,7 @@ export * from './home/types/home'
export * from './kungalgamer/types/kungalgamer'
export * from './login/types/login'
export * from './topic/types/topic'
export * from './topic/types/aside'
export * from './update-log/types/updateLog'
// 暴露出所有 api

47
src/api/topic/index.ts
View file

@ -1,11 +1,54 @@
import { fetchGet } from '@/utils/request'
// 将对象转为请求参数的函数
import objectToQueryParams from '@/utils/objectToQueryParams'
import * as Aside from './types/aside'
import * as Topic from './types/topic'
const topicURLs = {
// 左侧相同标签下的其它话题
getRelatedTopicsByTags: `/topic/nav/same`,
// 楼主的其它话题
getPopularTopicsByUserUid: `/topic/nav/master`,
// 获取单个话题
getTopicByTid: `/topic/detail`,
// 根据话题 id 获取话题回复
getRepliesByPid: `/topic/detail`,
}
// 左侧相同标签下的其它话题
export async function getRelatedTopicsByTagsApi(
request: Aside.TopicAsideOtherTagRequestData
): Promise<Aside.TopicAsideResponseData> {
try {
const queryParams = objectToQueryParams(request)
const url = `${topicURLs.getRelatedTopicsByTags}?${queryParams}`
const response = await fetchGet<Aside.TopicAsideResponseData>(url)
return response
} catch (error) {
console.log(error)
throw new Error('Failed to fetch aside other topic')
}
}
// 楼主的其它话题
export async function getPopularTopicsByUserUidApi(
request: Aside.TopicAsideMasterRequestData
): Promise<Aside.TopicAsideResponseData> {
try {
const queryParams = objectToQueryParams(request)
const url = `${topicURLs.getPopularTopicsByUserUid}?${queryParams}`
const response = await fetchGet<Aside.TopicAsideResponseData>(url)
return response
} catch (error) {
console.log(error)
throw new Error('Failed to fetch master other topic')
}
}
// 获取单个话题
export async function getTopicByTidApi(
tid: number
@ -34,7 +77,7 @@ export async function getRepliesByPidApi(
return response
} catch (error) {
console.log(error)
throw new Error('Failed to fetch topic')
throw new Error('Failed to fetch replies')
}
}
@ -50,6 +93,6 @@ export async function getCommentsByReplyRidApi(
return response
} catch (error) {
console.log(error)
throw new Error('Failed to fetch topic')
throw new Error('Failed to fetch comments')
}
}

23
src/api/topic/types/aside.ts Normal file
View file

@ -0,0 +1,23 @@
// 话题详情界面的侧边栏
export interface TopicAside {
title: string
tid: number
}
export interface TopicAsideOtherTagRequestData {
// 本话题的 tags
tags: string[]
// 当前话题的 tid，因为相同标签下的其它话题不包括本话题
tid: string
}
export interface TopicAsideMasterRequestData {
// 楼主 id
uid: number
// 当前话题的 tid，因为相同标签下的其它话题不包括本话题
tid: string
}
// Aside 响应数据的格式
export type TopicAsideResponseData = KUNGalgameResponseData<TopicAside[]>

4
src/router/guard/permission.ts
View file

@ -1,6 +1,6 @@
import { Router } from 'vue-router'
import { type RouteRecordRaw } from 'vue-router'
import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
import { WHITE_LIST } from '../router'
import { storeToRefs } from 'pinia'
import { unref } from 'vue'
@ -10,7 +10,7 @@ import { asyncRoutes } from '../router'
export const createPermission = (router: Router) => {
router.beforeEach(async (to, from, next) => {
const useStore = useKUNGalgamerStore()
const useStore = useKUNGalgameUserStore()
const { token } = storeToRefs(useStore)
const getRoute = asyncRoutes

4
src/store/index.ts
View file

@ -3,7 +3,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import type { App } from 'vue'
// 导入用户 store
import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
// 导入网站设置面板 store
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
@ -16,7 +16,7 @@ export function setupPinia(app: App<Element>) {
}
export function storeReset() {
const userStore = useKUNGalgamerStore()
const userStore = useKUNGalgameUserStore()
const settingsStore = useKUNGalgameSettingsStore()
userStore.$reset()

19
src/store/modules/kungalgamer.ts
View file

@ -2,26 +2,25 @@
* 用户的信息存储
*/
import { defineStore } from 'pinia'
import { type Ref, ref } from 'vue'
import { LoginRequestData, LoginResponseData } from '@/api/index'
import { postLoginDataApi } from '@/api/index'
interface UserState {
uid: Ref<number>
avatar: Ref<string>
token: Ref<string>
refreshToken: Ref<string>
uid: number
avatar: string
token: string
refreshToken: string
}
// 这里用了 pinia-plugin-persistedstate，直接存储 token 即可
export const useKUNGalgamerStore = defineStore({
export const useKUNGalgameUserStore = defineStore({
id: 'kungalgamer',
persist: true,
state: (): UserState => ({
uid: ref<number>(0),
avatar: ref<string>(''),
token: ref<string>(''),
refreshToken: ref<string>(''),
uid: 0,
avatar: '',
token: '',
refreshToken: '',
}),
getters: {},
actions: {

38
src/store/modules/topic.ts
View file

@ -1,8 +1,16 @@
/* 话题详情的 store */
import { defineStore } from 'pinia'
import { getRepliesByPidApi, getTopicByTidApi } from '@/api/index'
import {
getRelatedTopicsByTagsApi,
getPopularTopicsByUserUidApi,
getRepliesByPidApi,
getTopicByTidApi,
} from '@/api/index'
import {
TopicAsideOtherTagRequestData,
TopicAsideMasterRequestData,
TopicAsideResponseData,
TopicDetailResponseData,
TopicReplyRequestData,
TopicReplyResponseData,
@ -68,6 +76,34 @@ export const useKUNGalgameTopicStore = defineStore({
},
}),
actions: {
// 左侧相同标签下的其它话题
getRelatedTopicsByTags(
request: TopicAsideOtherTagRequestData
): Promise<TopicAsideResponseData> {
return new Promise((resolve, reject) => {
getRelatedTopicsByTagsApi(request)
.then((res) => {
resolve(res)
})
.catch((error) => {
reject(error)
})
})
},
// 楼主的其它话题
getPopularTopicsByUserUid(
request: TopicAsideMasterRequestData
): Promise<TopicAsideResponseData> {
return new Promise((resolve, reject) => {
getPopularTopicsByUserUidApi(request)
.then((res) => {
resolve(res)
})
.catch((error) => {
reject(error)
})
})
},
// 获取单个话题
getTopicByTid(tid: number): Promise<TopicDetailResponseData> {
return new Promise((resolve, reject) => {

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

@ -8,7 +8,7 @@ const props = defineProps(['data'])
<template>
<div class="topic">
<UserPart :kungalgamer="props.data.uid" />
<!-- TODO: 进入指定话题的路由 -->
<!-- 进入指定话题的路由 -->
<router-link :to="`/topic/${props.data.tid}`">
<TopicPart :data="props.data" />
</router-link>

4
src/views/edit/components/Button.vue
View file

@ -8,7 +8,7 @@ import { toRaw } from 'vue'
// 导入编辑话题的 store
import { useKUNGalgameEditStore } from '@/store/modules/edit'
// 导入用户 store
import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
import { storeToRefs } from 'pinia'
// 导入路由
import { useRouter } from 'vue-router'
@ -60,7 +60,7 @@ const handlePublish = async () => {
time: Date.now(),
tags: rawData.tags,
category: rawData.category,
uid: useKUNGalgamerStore().uid,
uid: useKUNGalgameUserStore().uid,
}
// 检查提交数据是否合法

4
src/views/login/components/Login.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
import { useRouter } from 'vue-router'
// 使用全局通知
import { useKUNGalgameMessageStore } from '@/store/modules/message'
@ -24,7 +24,7 @@ const router = useRouter()
const info = useKUNGalgameMessageStore()
const useStore = useKUNGalgamerStore()
const useStore = useKUNGalgameUserStore()
// 用户登录的表单
const loginForm = reactive({

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

@ -2,21 +2,48 @@
这里是楼主的其他话题组件
-->
<script setup lang="ts">
// TODO: 后端接口
import { asideTopic } from '@/types/topic/topic'
import { ref } from 'vue'
import { TopicAside } from '@/api/index'
// 导入 topic store
import { useKUNGalgameTopicStore } from '@/store/modules/topic'
// 导入用户 store
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
import { storeToRefs } from 'pinia'
import { RouterLink, useRoute } from 'vue-router'
import { onMounted } from 'vue'
const route = useRoute()
const tid = route.params.tid as string
const { uid } = storeToRefs(useKUNGalgameUserStore())
const topicData = ref<TopicAside[]>()
onMounted(async () => {
console.log(tid)
topicData.value = (
await useKUNGalgameTopicStore().getPopularTopicsByUserUid({
uid: uid.value,
tid: tid,
})
).data
})
</script>
<template>
<!-- 楼主的其它话题 -->
<div class="master">
<ul>
<li>
{{ $tm('topic.aside.master') }}
</li>
<li v-for="kun in asideTopic" :key="kun.index">
<router-link :to="kun.router">{{ kun.name }}</router-link>
</li>
</ul>
<div class="title">
{{ $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>
</div>
</div>
</template>
@ -24,8 +51,6 @@ import { asideTopic } from '@/types/topic/topic'
/* 楼主的其它话题 */
.master {
width: 100%;
height: 1px;
flex-grow: 4;
/* 隐藏溢出的颜色 */
overflow: hidden;
@ -36,58 +61,56 @@ import { asideTopic } from '@/types/topic/topic'
border: 1px solid var(--kungalgame-trans-pink-2);
background-color: var(--kungalgame-trans-pink-0);
ul {
height: 100%;
/* 整体为一个无序列表，列表为弹性盒 */
height: 340px;
display: flex;
flex-direction: column;
.title {
/* 左侧没有 border，没有 hover */
border-left: 0;
/* 相对于单个话题标题的比例 */
height: 40px;
font-size: 14px;
font-weight: bold;
color: var(--kungalgame-font-color-2);
background-color: var(--kungalgame-trans-pink-1);
/* 与单个话题标题的分割线 */
border-bottom: 1px solid var(--kungalgame-trans-pink-2);
display: flex;
flex-direction: column;
& > li {
height: 1px;
justify-content: center;
align-items: center;
}
.topic {
height: 60px;
display: flex;
justify-content: center;
align-items: center;
/* 设置左侧的 border 方便制作 hover */
border-left: 4px solid transparent;
/* 内边距盒子 */
box-sizing: border-box;
&:hover {
border-left: 4px solid var(--kungalgame-blue-3);
background-color: var(--kungalgame-trans-pink-1);
transition: 0.2s;
}
a {
width: 100%;
/* 每个项目相对于标题的占比 */
flex-grow: 3;
height: 100%;
/* 左右两侧的距离 */
margin: 0 17px;
color: var(--kungalgame-font-color-3);
/* 标题显示两行、超出部分隐藏 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
-webkit-box-orient: vertical; /* 设置为纵向排列 */
-webkit-line-clamp: 2; /* 显示两行文本 */
/* 标题的字体属性 */
font-size: small;
display: flex;
/* 垂直居中 */
align-items: center;
/* 设置左侧的 border 方便制作 hover */
border-left: 4px solid transparent;
/* 内边距盒子 */
box-sizing: border-box;
&:hover {
border-left: 4px solid var(--kungalgame-blue-3);
background-color: var(--kungalgame-trans-pink-1);
transition: 0.2s;
}
a {
/* 左右两侧的距离 */
margin: 0 17px;
color: var(--kungalgame-font-color-3);
/* 标题显示两行、超出部分隐藏 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
-webkit-box-orient: vertical; /* 设置为纵向排列 */
-webkit-line-clamp: 2; /* 显示两行文本 */
/* 标题的字体属性 */
font-size: small;
line-height: 1.5em;
box-sizing: border-box;
}
&:nth-child(1) {
/* 左侧没有 border，没有 hover */
border-left: 0;
/* 相对于单个话题标题的比例 */
flex-grow: 2;
line-height: 40px;
font-size: 14px;
font-weight: bold;
color: var(--kungalgame-font-color-2);
background-color: var(--kungalgame-trans-pink-1);
/* 与单个话题标题的分割线 */
border-bottom: 1px solid var(--kungalgame-trans-pink-2);
/* 水平居中 */
justify-content: center;
}
}
}
}