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

feat: pool get topics

Browse source
This commit is contained in:
KUN1007 2023-11-19 16:02:43 +08:00
parent 8093c7ece6
commit 7b63af238e
8 changed files with 72 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/api/pool/types/pool.ts
View file

@ -1,4 +1,4 @@
interface PoolTopic {
export interface PoolTopic {
tid: number
title: string
views: number

2
src/store/temp/pool.ts
View file

@ -10,7 +10,7 @@ export const useTempPoolStore = defineStore({
persist: false,
state: (): PoolStoreTemp => ({
page: 1,
limit: 0,
limit: 10,
sortField: 'time',
sortOrder: 'desc',
}),

4
src/utils/formatTime.ts
View file

@ -37,7 +37,7 @@ const languageOptions = {
},
}
function replaceTimeUnits(input: string, language: string) {
const replaceTimeUnits = (input: string, language: string) => {
const languageOption =
(languageOptions as Record<string, any>)[language] || languageOptions.en
@ -66,7 +66,7 @@ function replaceTimeUnits(input: string, language: string) {
}
// Format time difference
export function formatTimeDifference(pastTime: number, language: string) {
export const formatTimeDifference = (pastTime: number, language: string) => {
const now = dayjs()
const diffInSeconds = now.diff(pastTime, 'second')
const hint = language === 'en' ? ' ago' : '前'

10
src/utils/formatTimeI18n.ts Normal file
View file

@ -0,0 +1,10 @@
import dayjs from 'dayjs'
import 'dayjs/locale/en'
dayjs.locale('en')
export const formatTimeI18n = (time: number) => {
const formattedENDate = dayjs(time).format('MMMM D, YYYY - h:mm:ss A')
const formattedCNDate = dayjs(time).format('YYYY年MM月DD日-HH:mm:ss 发布')
return { formattedENDate, formattedCNDate }
}

30
src/views/pool/Pool.vue
View file

@ -1,19 +1,30 @@
<script setup lang="ts">
import { computed } from 'vue'
import { computed, onMounted, ref } from 'vue'
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
import Topic from './components/Topic.vue'
import Bar from './components/Bar.vue'
import { topic } from './components/topic'
import { useTempPoolStore } from '@/store/temp/pool'
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
import { storeToRefs } from 'pinia'
const settingsStore = useKUNGalgameSettingsStore()
const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
import type { PoolTopic } from '@/api'
const topics = ref<PoolTopic[]>([])
const { showKUNGalgamePageWidth } = storeToRefs(useKUNGalgameSettingsStore())
const poolPageWidth = computed(() => {
return showKUNGalgamePageWidth.value.Pool + '%'
})
const getTopics = async () => {
return (await useTempPoolStore().getTopics()).data
}
onMounted(async () => {
topics.value = await getTopics()
})
</script>
<template>
@ -21,11 +32,10 @@ const poolPageWidth = computed(() => {
<div class="pool-container">
<div class="topic-container">
<Topic
v-for="kun in topic"
v-for="(kun, index) in topics"
:key="index"
class="item"
:key="kun.index"
:data="kun"
:class="`item-${kun.index}`"
:topic="kun"
/>
</div>
@ -70,7 +80,7 @@ const poolPageWidth = computed(() => {
}
.topic-container {
grid-template-columns: repeat(2, auto);
grid-template-columns: repeat(2, minmax(100px, 222px));
grid-auto-rows: minmax(100px, 300px);
}
}

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

@ -1,11 +1,12 @@
<script setup lang="ts">
import { onMounted, watch, ref, computed } from 'vue'
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
import { storeToRefs } from 'pinia'
const { showKUNGalgameMode } = storeToRefs(useKUNGalgameSettingsStore())
import { randomNum } from '@/utils/random'
import { formatTimeI18n } from '@/utils/formatTimeI18n'
const light = `rgba(${randomNum(200, 255)}, ${randomNum(200, 255)}, ${randomNum(
200,
@ -17,7 +18,30 @@ const dark = `rgba(${randomNum(0, 55)}, ${randomNum(0, 55)}, ${randomNum(
55
)}, ${randomNum(30, 70) / 100})`
import type { PoolTopic } from '@/api'
const props = defineProps<{
topic: PoolTopic
}>()
const color = ref(light)
const { showKUNGalgameMode, showKUNGalgameLanguage } = storeToRefs(
useKUNGalgameSettingsStore()
)
const topic = computed(() => props.topic)
const { formattedENDate, formattedCNDate } = formatTimeI18n(topic.value.time)
const loliTime = computed(() => {
if (showKUNGalgameLanguage.value === 'en') {
return formattedENDate
}
if (showKUNGalgameLanguage.value === 'zh') {
return formattedCNDate
}
return ''
})
// 初始化色彩
onMounted(() => {
@ -35,35 +59,31 @@ onMounted(() => {
}
})
})
const props = defineProps(['data', 'itemStyle'])
import { randomNum } from '@/utils/random'
import { onMounted, watch } from 'vue'
</script>
<template>
<div class="topic">
<div class="title">
{{ props.data.title }}
{{ topic.title }}
</div>
<div class="content">{{ props.data.content }}</div>
<div class="content">{{ topic.content }}</div>
<div class="status">
<span>
<Icon icon="ic:outline-remove-red-eye" />
{{ props.data.view }}
{{ topic.views }}
</span>
<span>
<Icon icon="line-md:thumbs-up-twotone" />
{{ props.data.like }}
{{ topic.likesCount }}
</span>
</div>
<div class="time">
<Icon class="hourglass" icon="eos-icons:hourglass" />
<div>{{ props.data.time }} 发布</div>
<div>{{ loliTime }}</div>
</div>
</div>
</template>
@ -126,10 +146,10 @@ import { onMounted, watch } from 'vue'
font-size: small;
letter-spacing: 1px;
overflow: hidden;
white-space: nowrap;
padding: 7px 0;
.hourglass {
flex-shrink: 0;
margin: 0 5px;
color: var(--kungalgame-purple-4);
}

111
src/views/pool/components/topic.ts
View file

@ -1,111 +0,0 @@
interface Topic {
index: number
title: string
content: string
view: number
like: number
time: string
}
export const topic: Topic[] = [
{
index: 1,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 2,
title:
'啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
content:
'啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 3,
title: '啊这可海星',
content:
'啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 4,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 5,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 6,
title: '啊这可海星',
content:
'啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 7,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 8,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 9,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 10,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 11,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
{
index: 12,
title: '啊这可海星',
content: '啊这可海星',
view: 1007,
like: 1007,
time: '12/06/2023',
},
]

27
src/views/topic/components/Time.vue
View file

@ -1,26 +1,18 @@
<!-- 发帖的时间 -->
<script setup lang="ts">
import { computed } from 'vue'
import { Icon } from '@iconify/vue'
import dayjs from 'dayjs'
import 'dayjs/locale/en' // 导入英文语言包
// 使用设置界面的 store，目的是获取网站整体的语言
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
import { storeToRefs } from 'pinia'
import { formatTimeI18n } from '@/utils/formatTimeI18n'
const props = defineProps<{
time?: number
time: number
}>()
// 使用设置面板的 store
const settingsStore = useKUNGalgameSettingsStore()
const { showKUNGalgameLanguage } = storeToRefs(settingsStore)
// 设置使用英文语言
dayjs.locale('en')
const formattedCNDate = dayjs(props.time).format('YYYY年MM月DD日-HH:mm:ss 发布')
const formattedENDate = dayjs(props.time).format('MMMM D, YYYY - h:mm:ss A')
const { showKUNGalgameLanguage } = storeToRefs(useKUNGalgameSettingsStore())
const { formattedENDate, formattedCNDate } = formatTimeI18n(props.time)
const loliTime = computed(() => {
if (showKUNGalgameLanguage.value === 'en') {
@ -36,40 +28,33 @@ const loliTime = computed(() => {
</script>
<template>
<!-- 发帖时间 -->
<div class="time">
<!-- 沙漏图标字体 -->
<Icon class="hourglass" icon="eos-icons:hourglass" />
<div>{{ loliTime }}</div>
</div>
</template>
<style lang="scss" scoped>
/* 发帖时间 */
.time {
display: flex;
align-items: center;
flex-shrink: 0;
font-size: small;
/* 文字间距 */
letter-spacing: 1px;
/* 窗口缩小不换行 */
overflow: hidden;
white-space: nowrap;
color: var(--kungalgame-font-color-3);
/* 发帖时间的样式 */
div {
padding-right: 20px;
}
}
/* 沙漏的样式 */
.hourglass {
font-size: 23px;
margin: 0 10px;
color: var(--kungalgame-red-4);
}
/* 适配手机端 */
@media (max-width: 700px) {
.time {
justify-content: center;