mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-15 03:20:55 +08:00
Compare commits
12 Commits
codex/crea
...
feature/da
| Author | SHA1 | Date | |
|---|---|---|---|
|
d2c2213197 | ||
|
|
5bc9ff45d7 | ||
|
|
5eb206a358 | ||
|
18179cca22 | ||
|
|
2b28cb2ac1 | ||
|
|
610a645092 | ||
|
|
504ca55cad | ||
|
|
0fc1415a14 | ||
|
|
50a84220fe | ||
|
|
af3e049c23 | ||
|
|
c33b411659 | ||
|
|
e819926cf3 |
@@ -46,7 +46,6 @@ function onError() {
|
||||
|
||||
<style scoped>
|
||||
.base-image {
|
||||
display: block;
|
||||
transition:
|
||||
filter 0.35s ease,
|
||||
transform 0.35s ease,
|
||||
@@ -55,8 +54,8 @@ function onError() {
|
||||
}
|
||||
|
||||
.base-image-ph {
|
||||
filter: blur(10px) saturate(0.85);
|
||||
transform: scale(1.02);
|
||||
filter: blur(20px);
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
.base-image.is-loaded {
|
||||
|
||||
92
frontend_nuxt/components/BaseTabs.vue
Normal file
92
frontend_nuxt/components/BaseTabs.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="base-tabs">
|
||||
<div class="base-tabs-header">
|
||||
<div class="base-tabs-items">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
:class="['base-tabs-item', { selected: modelValue === tab.key }]"
|
||||
@click="$emit('update:modelValue', tab.key)"
|
||||
>
|
||||
<i v-if="tab.icon" :class="tab.icon"></i>
|
||||
<div class="base-tabs-item-label">{{ tab.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-tabs-header-right">
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
modelValue: { type: String, required: true },
|
||||
tabs: { type: Array, default: () => [] },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
let touchStartX = 0
|
||||
|
||||
function onTouchStart(e) {
|
||||
touchStartX = e.touches[0].clientX
|
||||
}
|
||||
|
||||
function onTouchEnd(e) {
|
||||
const diffX = e.changedTouches[0].clientX - touchStartX
|
||||
if (Math.abs(diffX) > 50) {
|
||||
const index = props.tabs.findIndex((t) => t.key === props.modelValue)
|
||||
if (diffX < 0 && index < props.tabs.length - 1) {
|
||||
emit('update:modelValue', props.tabs[index + 1].key)
|
||||
} else if (diffX > 0 && index > 0) {
|
||||
emit('update:modelValue', props.tabs[index - 1].key)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-tabs-header {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.base-tabs-items {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.base-tabs-item {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.base-tabs-item i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.base-tabs-item.selected {
|
||||
color: var(--primary-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.base-tabs-header-right {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.base-tabs-content {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div class="multi-tabs">
|
||||
<div class="multi-tabs-header" :class="headerClass">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.name"
|
||||
:class="[itemClass, { selected: current === tab.name }]"
|
||||
@click="select(tab.name)"
|
||||
>
|
||||
<div :class="labelClass">
|
||||
<i v-if="tab.icon" :class="tab.icon"></i>
|
||||
{{ tab.label }}
|
||||
</div>
|
||||
</div>
|
||||
<slot name="header-extra" />
|
||||
</div>
|
||||
<div class="multi-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
|
||||
<slot :selected="current" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
tabs: { type: Array, required: true },
|
||||
modelValue: { type: String, required: true },
|
||||
headerClass: { type: String, default: '' },
|
||||
itemClass: { type: String, default: '' },
|
||||
labelClass: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const current = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
})
|
||||
|
||||
const select = (name) => {
|
||||
current.value = name
|
||||
}
|
||||
|
||||
const startX = ref(0)
|
||||
const startY = ref(0)
|
||||
|
||||
const onTouchStart = (e) => {
|
||||
const t = e.touches[0]
|
||||
startX.value = t.clientX
|
||||
startY.value = t.clientY
|
||||
}
|
||||
|
||||
const onTouchEnd = (e) => {
|
||||
const t = e.changedTouches[0]
|
||||
const dx = t.clientX - startX.value
|
||||
const dy = t.clientY - startY.value
|
||||
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
|
||||
const idx = props.tabs.findIndex((t) => t.name === current.value)
|
||||
if (dx < 0 && idx < props.tabs.length - 1) {
|
||||
current.value = props.tabs[idx + 1].name
|
||||
} else if (dx > 0 && idx > 0) {
|
||||
current.value = props.tabs[idx - 1].name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.multi-tabs-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.multi-tabs-header::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.multi-tabs-content {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -88,24 +88,24 @@ export default defineNuxtConfig({
|
||||
vite: {
|
||||
build: {
|
||||
// increase warning limit and split large libraries into separate chunks
|
||||
chunkSizeWarningLimit: 1024,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules')) {
|
||||
if (id.includes('vditor')) {
|
||||
return 'vditor'
|
||||
}
|
||||
if (id.includes('echarts')) {
|
||||
return 'echarts'
|
||||
}
|
||||
if (id.includes('highlight.js')) {
|
||||
return 'highlight'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
// chunkSizeWarningLimit: 1024,
|
||||
// rollupOptions: {
|
||||
// output: {
|
||||
// manualChunks(id) {
|
||||
// if (id.includes('node_modules')) {
|
||||
// if (id.includes('vditor')) {
|
||||
// return 'vditor'
|
||||
// }
|
||||
// if (id.includes('echarts')) {
|
||||
// return 'echarts'
|
||||
// }
|
||||
// if (id.includes('highlight.js')) {
|
||||
// return 'highlight'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,30 +1,23 @@
|
||||
<template>
|
||||
<div class="about-page">
|
||||
<MultiTabs
|
||||
:tabs="tabs"
|
||||
v-model="selectedTab"
|
||||
header-class="about-tabs"
|
||||
item-class="about-tabs-item"
|
||||
label-class="about-tabs-item-label"
|
||||
>
|
||||
<template #default>
|
||||
<div class="about-loading" v-if="isFetching">
|
||||
<l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="about-content"
|
||||
v-html="renderMarkdown(content)"
|
||||
@click="handleContentClick"
|
||||
></div>
|
||||
</template>
|
||||
</MultiTabs>
|
||||
<BaseTabs v-model="selectedTab" :tabs="tabs">
|
||||
<div class="about-loading" v-if="isFetching">
|
||||
<l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="about-content"
|
||||
v-html="renderMarkdown(content)"
|
||||
@click="handleContentClick"
|
||||
></div>
|
||||
</BaseTabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
|
||||
import BaseTabs from '~/components/BaseTabs.vue'
|
||||
|
||||
export default {
|
||||
name: 'AboutPageView',
|
||||
@@ -32,27 +25,27 @@ export default {
|
||||
const isFetching = ref(false)
|
||||
const tabs = [
|
||||
{
|
||||
name: 'about',
|
||||
key: 'about',
|
||||
label: '关于',
|
||||
file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/about.md',
|
||||
},
|
||||
{
|
||||
name: 'agreement',
|
||||
key: 'agreement',
|
||||
label: '用户协议',
|
||||
file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/agreement.md',
|
||||
},
|
||||
{
|
||||
name: 'guideline',
|
||||
key: 'guideline',
|
||||
label: '创作准则',
|
||||
file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/guideline.md',
|
||||
},
|
||||
{
|
||||
name: 'privacy',
|
||||
key: 'privacy',
|
||||
label: '隐私政策',
|
||||
file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md',
|
||||
},
|
||||
]
|
||||
const selectedTab = ref(tabs[0].name)
|
||||
const selectedTab = ref(tabs[0].key)
|
||||
const content = ref('')
|
||||
|
||||
const loadContent = async (file) => {
|
||||
@@ -71,14 +64,13 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedTab, (name) => {
|
||||
const tab = tabs.find((t) => t.name === name)
|
||||
if (tab) loadContent(tab.file)
|
||||
onMounted(() => {
|
||||
loadContent(tabs[0].file)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const first = tabs[0]
|
||||
if (first) loadContent(first.file)
|
||||
watch(selectedTab, (name) => {
|
||||
const tab = tabs.find((t) => t.key === name)
|
||||
if (tab) loadContent(tab.file)
|
||||
})
|
||||
|
||||
const handleContentClick = (e) => {
|
||||
@@ -97,28 +89,6 @@ export default {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about-tabs {
|
||||
top: calc(var(--header-height) + 1px);
|
||||
background-color: var(--background-color-blur);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
margin-bottom: 20px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.about-tabs-item {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.about-tabs-item.selected {
|
||||
color: var(--primary-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
|
||||
@@ -36,35 +36,19 @@
|
||||
|
||||
<div class="other-login-page-content">
|
||||
<div class="login-page-button" @click="loginWithGoogle">
|
||||
<BaseImage
|
||||
class="login-page-button-icon"
|
||||
src="../assets/icons/google.svg"
|
||||
alt="Google Logo"
|
||||
/>
|
||||
<img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
|
||||
<div class="login-page-button-text">Google 登录</div>
|
||||
</div>
|
||||
<div class="login-page-button" @click="loginWithGithub">
|
||||
<BaseImage
|
||||
class="login-page-button-icon"
|
||||
src="../assets/icons/github.svg"
|
||||
alt="GitHub Logo"
|
||||
/>
|
||||
<img class="login-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
|
||||
<div class="login-page-button-text">GitHub 登录</div>
|
||||
</div>
|
||||
<div class="login-page-button" @click="loginWithDiscord">
|
||||
<BaseImage
|
||||
class="login-page-button-icon"
|
||||
src="../assets/icons/discord.svg"
|
||||
alt="Discord Logo"
|
||||
/>
|
||||
<img class="login-page-button-icon" src="../assets/icons/discord.svg" alt="Discord Logo" />
|
||||
<div class="login-page-button-text">Discord 登录</div>
|
||||
</div>
|
||||
<div class="login-page-button" @click="loginWithTwitter">
|
||||
<BaseImage
|
||||
class="login-page-button-icon"
|
||||
src="../assets/icons/twitter.svg"
|
||||
alt="Twitter Logo"
|
||||
/>
|
||||
<img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
|
||||
<div class="login-page-button-text">Twitter 登录</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,118 +7,113 @@
|
||||
<div v-if="!isFloatMode" class="float-control">
|
||||
<i class="fas fa-compress" @click="minimize" title="最小化"></i>
|
||||
</div>
|
||||
<MultiTabs :tabs="tabs" v-model="activeTab" header-class="tabs" item-class="tab">
|
||||
<template #default="{ selected }">
|
||||
<div v-if="selected === 'messages'">
|
||||
<div v-if="loading" class="loading-message">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
<BaseTabs v-model="activeTab" :tabs="tabs">
|
||||
<div v-if="activeTab === 'messages'">
|
||||
<div v-if="loading" class="loading-message">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-container">
|
||||
<div class="error-text">{{ error }}</div>
|
||||
</div>
|
||||
<div v-else-if="error" class="error-container">
|
||||
<div class="error-text">{{ error }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && !isFloatMode" class="search-container">
|
||||
<SearchPersonDropdown />
|
||||
</div>
|
||||
<div v-if="!loading && !isFloatMode" class="search-container">
|
||||
<SearchPersonDropdown />
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && conversations.length === 0" class="empty-container">
|
||||
<BasePlaceholder
|
||||
v-if="conversations.length === 0"
|
||||
text="暂无会话"
|
||||
icon="fas fa-inbox"
|
||||
<div v-if="!loading && conversations.length === 0" class="empty-container">
|
||||
<BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!loading"
|
||||
v-for="convo in conversations"
|
||||
:key="convo.id"
|
||||
class="conversation-item"
|
||||
@click="goToConversation(convo.id)"
|
||||
>
|
||||
<div class="conversation-avatar">
|
||||
<BaseImage
|
||||
:src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
|
||||
:alt="getOtherParticipant(convo)?.username || '用户'"
|
||||
class="avatar-img"
|
||||
@error="handleAvatarError"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="conversation-content">
|
||||
<div class="conversation-header">
|
||||
<div class="participant-name">
|
||||
{{ getOtherParticipant(convo)?.username || '未知用户' }}
|
||||
</div>
|
||||
<div class="message-time">
|
||||
{{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="last-message-row">
|
||||
<div class="last-message">
|
||||
{{
|
||||
convo.lastMessage
|
||||
? stripMarkdownLength(convo.lastMessage.content, 100)
|
||||
: '暂无消息'
|
||||
}}
|
||||
</div>
|
||||
<div v-if="convo.unreadCount > 0" class="unread-count-badge">
|
||||
{{ convo.unreadCount }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-if="loadingChannels" class="loading-message">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="channels.length === 0" class="empty-container">
|
||||
<BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
|
||||
</div>
|
||||
<div
|
||||
v-if="!loading"
|
||||
v-for="convo in conversations"
|
||||
:key="convo.id"
|
||||
v-for="ch in channels"
|
||||
:key="ch.id"
|
||||
class="conversation-item"
|
||||
@click="goToConversation(convo.id)"
|
||||
@click="goToChannel(ch.id)"
|
||||
>
|
||||
<div class="conversation-avatar">
|
||||
<BaseImage
|
||||
:src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
|
||||
:alt="getOtherParticipant(convo)?.username || '用户'"
|
||||
:src="ch.avatar || '/default-avatar.svg'"
|
||||
:alt="ch.name"
|
||||
class="avatar-img"
|
||||
@error="handleAvatarError"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="conversation-content">
|
||||
<div class="conversation-header">
|
||||
<div class="participant-name">
|
||||
{{ getOtherParticipant(convo)?.username || '未知用户' }}
|
||||
{{ ch.name }}
|
||||
<span v-if="ch.unreadCount > 0" class="unread-dot"></span>
|
||||
</div>
|
||||
<div class="message-time">
|
||||
{{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
|
||||
{{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="last-message-row">
|
||||
<div class="last-message">
|
||||
{{
|
||||
convo.lastMessage
|
||||
? stripMarkdownLength(convo.lastMessage.content, 100)
|
||||
: '暂无消息'
|
||||
ch.lastMessage
|
||||
? stripMarkdownLength(ch.lastMessage.content, 100)
|
||||
: ch.description
|
||||
}}
|
||||
</div>
|
||||
<div v-if="convo.unreadCount > 0" class="unread-count-badge">
|
||||
{{ convo.unreadCount }}
|
||||
</div>
|
||||
<div class="member-count">成员 {{ ch.memberCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="loadingChannels" class="loading-message">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="channels.length === 0" class="empty-container">
|
||||
<BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
|
||||
</div>
|
||||
<div
|
||||
v-for="ch in channels"
|
||||
:key="ch.id"
|
||||
class="conversation-item"
|
||||
@click="goToChannel(ch.id)"
|
||||
>
|
||||
<div class="conversation-avatar">
|
||||
<BaseImage
|
||||
:src="ch.avatar || '/default-avatar.svg'"
|
||||
:alt="ch.name"
|
||||
class="avatar-img"
|
||||
@error="handleAvatarError"
|
||||
/>
|
||||
</div>
|
||||
<div class="conversation-content">
|
||||
<div class="conversation-header">
|
||||
<div class="participant-name">
|
||||
{{ ch.name }}
|
||||
<span v-if="ch.unreadCount > 0" class="unread-dot"></span>
|
||||
</div>
|
||||
<div class="message-time">
|
||||
{{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-message-row">
|
||||
<div class="last-message">
|
||||
{{
|
||||
ch.lastMessage
|
||||
? stripMarkdownLength(ch.lastMessage.content, 100)
|
||||
: ch.description
|
||||
}}
|
||||
</div>
|
||||
<div class="member-count">成员 {{ ch.memberCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MultiTabs>
|
||||
</div>
|
||||
</BaseTabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -134,6 +129,7 @@ import TimeManager from '~/utils/time'
|
||||
import { stripMarkdownLength } from '~/utils/markdown'
|
||||
import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
|
||||
import BasePlaceholder from '~/components/BasePlaceholder.vue'
|
||||
import BaseTabs from '~/components/BaseTabs.vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const conversations = ref([])
|
||||
@@ -149,11 +145,11 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
|
||||
useChannelsUnreadCount()
|
||||
let subscription = null
|
||||
|
||||
const tabs = [
|
||||
{ name: 'messages', label: '站内信' },
|
||||
{ name: 'channels', label: '频道' },
|
||||
]
|
||||
const activeTab = ref('channels')
|
||||
const tabs = [
|
||||
{ key: 'messages', label: '站内信' },
|
||||
{ key: 'channels', label: '频道' },
|
||||
]
|
||||
const channels = ref([])
|
||||
const loadingChannels = ref(false)
|
||||
const isFloatMode = computed(() => route.query.float === '1')
|
||||
@@ -222,8 +218,8 @@ async function fetchChannels() {
|
||||
}
|
||||
}
|
||||
|
||||
watch(activeTab, (val) => {
|
||||
if (val === 'messages') {
|
||||
watch(activeTab, (tab) => {
|
||||
if (tab === 'messages') {
|
||||
fetchConversations()
|
||||
} else {
|
||||
fetchChannels()
|
||||
@@ -327,18 +323,18 @@ function minimize() {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
:deep(.base-tabs-header) {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
:deep(.base-tabs-item) {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
:deep(.base-tabs-item.selected) {
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
@@ -504,7 +500,7 @@ function minimize() {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabs,
|
||||
:deep(.base-tabs-header),
|
||||
.loading-message,
|
||||
.error-container,
|
||||
.search-container,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,166 +1,170 @@
|
||||
<template>
|
||||
<div class="point-mall-page">
|
||||
<MultiTabs
|
||||
:tabs="tabs"
|
||||
v-model="selectedTab"
|
||||
header-class="point-tabs"
|
||||
item-class="point-tab-item"
|
||||
>
|
||||
<template #default="{ selected }">
|
||||
<template v-if="selected === 'mall'">
|
||||
<div class="point-mall-page-content">
|
||||
<section class="rules">
|
||||
<div class="section-title">🎉 积分规则</div>
|
||||
<div class="section-content">
|
||||
<div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
|
||||
{{ rule }}
|
||||
</div>
|
||||
<BaseTabs v-model="selectedTab" :tabs="tabs">
|
||||
<template v-if="selectedTab === 'mall'">
|
||||
<div class="point-mall-page-content">
|
||||
<section class="rules">
|
||||
<div class="section-title">🎉 积分规则</div>
|
||||
<div class="section-content">
|
||||
<div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
|
||||
{{ rule }}
|
||||
</div>
|
||||
</section>
|
||||
<div class="loading-points-container" v-if="isLoading">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
<div class="point-info">
|
||||
<p v-if="authState.loggedIn && point !== null">
|
||||
<span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
|
||||
class="point-value"
|
||||
>{{ point }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<section class="goods">
|
||||
<div class="goods-item" v-for="(good, idx) in goods" :key="idx">
|
||||
<BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
|
||||
<div class="goods-item-name">{{ good.name }}</div>
|
||||
<div class="goods-item-cost">
|
||||
<i class="fas fa-coins"></i>
|
||||
{{ good.cost }} 积分
|
||||
</div>
|
||||
<div
|
||||
class="goods-item-button"
|
||||
:class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
|
||||
@click="openRedeem(good)"
|
||||
>
|
||||
兑换
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<RedeemPopup
|
||||
:visible="dialogVisible"
|
||||
v-model="contact"
|
||||
:loading="loading"
|
||||
@close="closeRedeem"
|
||||
@submit="submitRedeem"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="loading-points-container" v-if="historyLoading">
|
||||
</section>
|
||||
|
||||
<div class="loading-points-container" v-if="isLoading">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
<BasePlaceholder
|
||||
v-else-if="histories.length === 0"
|
||||
text="暂无积分记录"
|
||||
icon="fas fa-inbox"
|
||||
|
||||
<div class="point-info">
|
||||
<p v-if="authState.loggedIn && point !== null">
|
||||
<span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
|
||||
class="point-value"
|
||||
>{{ point }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="goods">
|
||||
<div class="goods-item" v-for="(good, idx) in goods" :key="idx">
|
||||
<BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
|
||||
<div class="goods-item-name">{{ good.name }}</div>
|
||||
<div class="goods-item-cost">
|
||||
<i class="fas fa-coins"></i>
|
||||
{{ good.cost }} 积分
|
||||
</div>
|
||||
<div
|
||||
class="goods-item-button"
|
||||
:class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
|
||||
@click="openRedeem(good)"
|
||||
>
|
||||
兑换
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<RedeemPopup
|
||||
:visible="dialogVisible"
|
||||
v-model="contact"
|
||||
:loading="loading"
|
||||
@close="closeRedeem"
|
||||
@submit="submitRedeem"
|
||||
/>
|
||||
<div class="timeline-container" v-else>
|
||||
<BaseTimeline :items="histories">
|
||||
<template #item="{ item }">
|
||||
<div class="history-content">
|
||||
<template v-if="item.type === 'POST'">
|
||||
发送帖子
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
，获得{{ item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'COMMENT'">
|
||||
在文章
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
中
|
||||
<template v-if="!item.fromUserId">
|
||||
发送评论
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||
class="timeline-link"
|
||||
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
||||
>
|
||||
，获得{{ item.amount }}积分
|
||||
</template>
|
||||
<template v-else>
|
||||
被评论
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||
class="timeline-link"
|
||||
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
||||
>
|
||||
，获得{{ item.amount }}积分
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
|
||||
帖子
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
被
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||
item.fromUserName
|
||||
}}</NuxtLink>
|
||||
按赞，获得{{ item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'COMMENT_LIKED' && item.fromUserId">
|
||||
评论
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="loading-points-container" v-if="historyLoading">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
<BasePlaceholder
|
||||
v-else-if="histories.length === 0"
|
||||
text="暂无积分记录"
|
||||
icon="fas fa-inbox"
|
||||
/>
|
||||
<div class="timeline-container" v-else>
|
||||
<BaseTimeline :items="histories">
|
||||
<template #item="{ item }">
|
||||
<div class="history-content">
|
||||
<template v-if="item.type === 'POST'">
|
||||
发送帖子
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
，获得{{ item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'COMMENT'">
|
||||
在文章
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
中
|
||||
<template v-if="!item.fromUserId">
|
||||
发送评论
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||
class="timeline-link"
|
||||
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
||||
>
|
||||
被
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||
item.fromUserName
|
||||
}}</NuxtLink>
|
||||
按赞，获得{{ item.amount }}积分
|
||||
，获得{{ item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'INVITE' && item.fromUserId">
|
||||
邀请了好友
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||
item.fromUserName
|
||||
}}</NuxtLink>
|
||||
加入社区 🎉，获得 {{ item.amount }} 积分
|
||||
<template v-else>
|
||||
被评论
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||
class="timeline-link"
|
||||
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
||||
>
|
||||
，获得{{ item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'FEATURE'">
|
||||
文章
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
被收录为精选，获得 {{ item.amount }} 积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'REDEEM'">
|
||||
兑换商品，消耗 {{ -item.amount }} 积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'LOTTERY_JOIN'">
|
||||
参与抽奖帖
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
，消耗 {{ -item.amount }} 积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'LOTTERY_REWARD'">
|
||||
你的抽奖帖
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
被抽中，消耗 {{ -item.amount }} 积分
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
|
||||
帖子
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
被
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||
item.fromUserName
|
||||
}}</NuxtLink>
|
||||
按赞，获得{{ item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'COMMENT_LIKED' && item.fromUserId">
|
||||
评论
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||
class="timeline-link"
|
||||
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
||||
>
|
||||
被
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||
item.fromUserName
|
||||
}}</NuxtLink>
|
||||
按赞，获得{{ item.amount }}积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'INVITE' && item.fromUserId">
|
||||
邀请了好友
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||
item.fromUserName
|
||||
}}</NuxtLink>
|
||||
加入社区 🎉，获得 {{ item.amount }} 积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'FEATURE'">
|
||||
文章
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
被收录为精选，获得 {{ item.amount }} 积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'REDEEM'">
|
||||
兑换商品，消耗 {{ -item.amount }} 积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'LOTTERY_JOIN'">
|
||||
参与抽奖帖
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
，消耗 {{ -item.amount }} 积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'LOTTERY_REWARD'">
|
||||
你的抽奖帖
|
||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||
item.postTitle
|
||||
}}</NuxtLink>
|
||||
被
|
||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||
item.fromUserName
|
||||
}}</NuxtLink>
|
||||
参与，获得 {{ item.amount }} 积分
|
||||
</template>
|
||||
<template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
|
||||
<i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
|
||||
</div>
|
||||
<div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
</template>
|
||||
</MultiTabs>
|
||||
</BaseTabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -173,16 +177,16 @@ import BaseTimeline from '~/components/BaseTimeline.vue'
|
||||
import BasePlaceholder from '~/components/BasePlaceholder.vue'
|
||||
import { stripMarkdownLength } from '~/utils/markdown'
|
||||
import TimeManager from '~/utils/time'
|
||||
import BaseTabs from '~/components/BaseTabs.vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const API_BASE_URL = config.public.apiBaseUrl
|
||||
|
||||
const tabs = [
|
||||
{ name: 'mall', label: '积分兑换' },
|
||||
{ name: 'history', label: '积分历史' },
|
||||
]
|
||||
|
||||
const selectedTab = ref('mall')
|
||||
const tabs = [
|
||||
{ key: 'mall', label: '积分兑换' },
|
||||
{ key: 'history', label: '积分历史' },
|
||||
]
|
||||
const point = ref(null)
|
||||
const isLoading = ref(false)
|
||||
const histories = ref([])
|
||||
@@ -309,17 +313,17 @@ const submitRedeem = async () => {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.point-tabs {
|
||||
:deep(.base-tabs-header) {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--normal-border-color);
|
||||
}
|
||||
|
||||
.point-tab-item {
|
||||
:deep(.base-tabs-item) {
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.point-tab-item.selected {
|
||||
:deep(.base-tabs-item.selected) {
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
@@ -70,35 +70,19 @@
|
||||
|
||||
<div class="other-signup-page-content">
|
||||
<div class="signup-page-button" @click="signupWithGoogle">
|
||||
<BaseImage
|
||||
class="signup-page-button-icon"
|
||||
src="~/assets/icons/google.svg"
|
||||
alt="Google Logo"
|
||||
/>
|
||||
<img class="signup-page-button-icon" src="~/assets/icons/google.svg" alt="Google Logo" />
|
||||
<div class="signup-page-button-text">Google 注册</div>
|
||||
</div>
|
||||
<div class="signup-page-button" @click="signupWithGithub">
|
||||
<BaseImage
|
||||
class="signup-page-button-icon"
|
||||
src="~/assets/icons/github.svg"
|
||||
alt="GitHub Logo"
|
||||
/>
|
||||
<img class="signup-page-button-icon" src="~/assets/icons/github.svg" alt="GitHub Logo" />
|
||||
<div class="signup-page-button-text">GitHub 注册</div>
|
||||
</div>
|
||||
<div class="signup-page-button" @click="signupWithDiscord">
|
||||
<BaseImage
|
||||
class="signup-page-button-icon"
|
||||
src="~/assets/icons/discord.svg"
|
||||
alt="Discord Logo"
|
||||
/>
|
||||
<img class="signup-page-button-icon" src="~/assets/icons/discord.svg" alt="Discord Logo" />
|
||||
<div class="signup-page-button-text">Discord 注册</div>
|
||||
</div>
|
||||
<div class="signup-page-button" @click="signupWithTwitter">
|
||||
<BaseImage
|
||||
class="signup-page-button-icon"
|
||||
src="~/assets/icons/twitter.svg"
|
||||
alt="Twitter Logo"
|
||||
/>
|
||||
<img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
|
||||
<div class="signup-page-button-text">Twitter 注册</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,282 +72,246 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-tabs">
|
||||
<div
|
||||
:class="['profile-tabs-item', { selected: selectedTab === 'summary' }]"
|
||||
@click="selectedTab = 'summary'"
|
||||
>
|
||||
<i class="fas fa-chart-line"></i>
|
||||
<div class="profile-tabs-item-label">总结</div>
|
||||
<BaseTabs v-model="selectedTab" :tabs="tabs">
|
||||
<div v-if="tabLoading" class="tab-loading">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
|
||||
</div>
|
||||
<div
|
||||
:class="['profile-tabs-item', { selected: selectedTab === 'timeline' }]"
|
||||
@click="selectedTab = 'timeline'"
|
||||
>
|
||||
<i class="fas fa-clock"></i>
|
||||
<div class="profile-tabs-item-label">时间线</div>
|
||||
</div>
|
||||
<div
|
||||
:class="['profile-tabs-item', { selected: selectedTab === 'following' }]"
|
||||
@click="selectedTab = 'following'"
|
||||
>
|
||||
<i class="fas fa-user-plus"></i>
|
||||
<div class="profile-tabs-item-label">关注</div>
|
||||
</div>
|
||||
<div
|
||||
:class="['profile-tabs-item', { selected: selectedTab === 'favorites' }]"
|
||||
@click="selectedTab = 'favorites'"
|
||||
>
|
||||
<i class="fas fa-bookmark"></i>
|
||||
<div class="profile-tabs-item-label">收藏</div>
|
||||
</div>
|
||||
<div
|
||||
:class="['profile-tabs-item', { selected: selectedTab === 'achievements' }]"
|
||||
@click="selectedTab = 'achievements'"
|
||||
>
|
||||
<i class="fas fa-medal"></i>
|
||||
<div class="profile-tabs-item-label">勋章</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tabLoading" class="tab-loading">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-if="selectedTab === 'summary'" class="profile-summary">
|
||||
<div class="total-summary">
|
||||
<div class="summary-title">统计信息</div>
|
||||
<div class="total-summary-content">
|
||||
<div class="total-summary-item">
|
||||
<div class="total-summary-item-label">访问天数</div>
|
||||
<div class="total-summary-item-value">{{ user.visitedDays }}</div>
|
||||
<template v-else>
|
||||
<div v-if="selectedTab === 'summary'" class="profile-summary">
|
||||
<div class="total-summary">
|
||||
<div class="summary-title">统计信息</div>
|
||||
<div class="total-summary-content">
|
||||
<div class="total-summary-item">
|
||||
<div class="total-summary-item-label">访问天数</div>
|
||||
<div class="total-summary-item-value">{{ user.visitedDays }}</div>
|
||||
</div>
|
||||
<div class="total-summary-item">
|
||||
<div class="total-summary-item-label">已读帖子</div>
|
||||
<div class="total-summary-item-value">{{ user.readPosts }}</div>
|
||||
</div>
|
||||
<div class="total-summary-item">
|
||||
<div class="total-summary-item-label">已送出的💗</div>
|
||||
<div class="total-summary-item-value">{{ user.likesSent }}</div>
|
||||
</div>
|
||||
<div class="total-summary-item">
|
||||
<div class="total-summary-item-label">已收到的💗</div>
|
||||
<div class="total-summary-item-value">{{ user.likesReceived }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-summary-item">
|
||||
<div class="total-summary-item-label">已读帖子</div>
|
||||
<div class="total-summary-item-value">{{ user.readPosts }}</div>
|
||||
</div>
|
||||
<div class="summary-divider">
|
||||
<div class="hot-reply">
|
||||
<div class="summary-title">热门回复</div>
|
||||
<div class="summary-content" v-if="hotReplies.length > 0">
|
||||
<BaseTimeline :items="hotReplies">
|
||||
<template #item="{ item }">
|
||||
在
|
||||
<NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
|
||||
{{ item.comment.post.title }}
|
||||
</NuxtLink>
|
||||
<template v-if="item.comment.parentComment">
|
||||
下对
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
|
||||
</NuxtLink>
|
||||
回复了
|
||||
</template>
|
||||
<template v-else> 下评论了 </template>
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 200) }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-date">
|
||||
{{ formatDate(item.comment.createdAt) }}
|
||||
</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="summary-empty">暂无热门回复</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-summary-item">
|
||||
<div class="total-summary-item-label">已送出的💗</div>
|
||||
<div class="total-summary-item-value">{{ user.likesSent }}</div>
|
||||
<div class="hot-topic">
|
||||
<div class="summary-title">热门话题</div>
|
||||
<div class="summary-content" v-if="hotPosts.length > 0">
|
||||
<BaseTimeline :items="hotPosts">
|
||||
<template #item="{ item }">
|
||||
<NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
|
||||
{{ item.post.title }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-snippet">
|
||||
{{ stripMarkdown(item.post.snippet) }}
|
||||
</div>
|
||||
<div class="timeline-date">
|
||||
{{ formatDate(item.post.createdAt) }}
|
||||
</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="summary-empty">暂无热门话题</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-summary-item">
|
||||
<div class="total-summary-item-label">已收到的💗</div>
|
||||
<div class="total-summary-item-value">{{ user.likesReceived }}</div>
|
||||
<div class="hot-tag">
|
||||
<div class="summary-title">TA创建的tag</div>
|
||||
<div class="summary-content" v-if="hotTags.length > 0">
|
||||
<BaseTimeline :items="hotTags">
|
||||
<template #item="{ item }">
|
||||
<span class="timeline-link" @click="gotoTag(item.tag)">
|
||||
{{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
|
||||
</span>
|
||||
<div class="timeline-snippet" v-if="item.tag.description">
|
||||
{{ item.tag.description }}
|
||||
</div>
|
||||
<div class="timeline-date">
|
||||
{{ formatDate(item.tag.createdAt) }}
|
||||
</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="summary-empty">暂无标签</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-divider">
|
||||
<div class="hot-reply">
|
||||
<div class="summary-title">热门回复</div>
|
||||
<div class="summary-content" v-if="hotReplies.length > 0">
|
||||
<BaseTimeline :items="hotReplies">
|
||||
<template #item="{ item }">
|
||||
|
||||
<div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
|
||||
<div class="timeline-tabs">
|
||||
<div
|
||||
:class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
|
||||
@click="timelineFilter = 'all'"
|
||||
>
|
||||
全部
|
||||
</div>
|
||||
<div
|
||||
:class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
|
||||
@click="timelineFilter = 'articles'"
|
||||
>
|
||||
文章
|
||||
</div>
|
||||
<div
|
||||
:class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
|
||||
@click="timelineFilter = 'comments'"
|
||||
>
|
||||
评论和回复
|
||||
</div>
|
||||
</div>
|
||||
<BasePlaceholder
|
||||
v-if="filteredTimelineItems.length === 0"
|
||||
text="暂无时间线"
|
||||
icon="fas fa-inbox"
|
||||
/>
|
||||
<div class="timeline-list">
|
||||
<BaseTimeline :items="filteredTimelineItems">
|
||||
<template #item="{ item }">
|
||||
<template v-if="item.type === 'post'">
|
||||
发布了文章
|
||||
<NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
|
||||
{{ item.post.title }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'comment'">
|
||||
在
|
||||
<NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
|
||||
{{ item.comment.post.title }}
|
||||
</NuxtLink>
|
||||
<template v-if="item.comment.parentComment">
|
||||
下对
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
|
||||
</NuxtLink>
|
||||
回复了
|
||||
</template>
|
||||
<template v-else> 下评论了 </template>
|
||||
下评论了
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 200) }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-date">
|
||||
{{ formatDate(item.comment.createdAt) }}
|
||||
</div>
|
||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="summary-empty">暂无热门回复</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hot-topic">
|
||||
<div class="summary-title">热门话题</div>
|
||||
<div class="summary-content" v-if="hotPosts.length > 0">
|
||||
<BaseTimeline :items="hotPosts">
|
||||
<template #item="{ item }">
|
||||
<NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
|
||||
{{ item.post.title }}
|
||||
<template v-else-if="item.type === 'reply'">
|
||||
在
|
||||
<NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
|
||||
{{ item.comment.post.title }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-snippet">
|
||||
{{ stripMarkdown(item.post.snippet) }}
|
||||
</div>
|
||||
<div class="timeline-date">
|
||||
{{ formatDate(item.post.createdAt) }}
|
||||
</div>
|
||||
下对
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
|
||||
</NuxtLink>
|
||||
回复了
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 200) }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="summary-empty">暂无热门话题</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hot-tag">
|
||||
<div class="summary-title">TA创建的tag</div>
|
||||
<div class="summary-content" v-if="hotTags.length > 0">
|
||||
<BaseTimeline :items="hotTags">
|
||||
<template #item="{ item }">
|
||||
<template v-else-if="item.type === 'tag'">
|
||||
创建了标签
|
||||
<span class="timeline-link" @click="gotoTag(item.tag)">
|
||||
{{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
|
||||
</span>
|
||||
<div class="timeline-snippet" v-if="item.tag.description">
|
||||
{{ item.tag.description }}
|
||||
</div>
|
||||
<div class="timeline-date">
|
||||
{{ formatDate(item.tag.createdAt) }}
|
||||
</div>
|
||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="summary-empty">暂无标签</div>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
|
||||
<div class="timeline-tabs">
|
||||
<div
|
||||
:class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
|
||||
@click="timelineFilter = 'all'"
|
||||
>
|
||||
全部
|
||||
<div v-else-if="selectedTab === 'following'" class="follow-container">
|
||||
<div class="follow-tabs">
|
||||
<div
|
||||
:class="['follow-tab-item', { selected: followTab === 'followers' }]"
|
||||
@click="followTab = 'followers'"
|
||||
>
|
||||
关注者
|
||||
</div>
|
||||
<div
|
||||
:class="['follow-tab-item', { selected: followTab === 'following' }]"
|
||||
@click="followTab = 'following'"
|
||||
>
|
||||
正在关注
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
|
||||
@click="timelineFilter = 'articles'"
|
||||
>
|
||||
文章
|
||||
</div>
|
||||
<div
|
||||
:class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
|
||||
@click="timelineFilter = 'comments'"
|
||||
>
|
||||
评论和回复
|
||||
<div class="follow-list">
|
||||
<UserList v-if="followTab === 'followers'" :users="followers" />
|
||||
<UserList v-else :users="followings" />
|
||||
</div>
|
||||
</div>
|
||||
<BasePlaceholder
|
||||
v-if="filteredTimelineItems.length === 0"
|
||||
text="暂无时间线"
|
||||
icon="fas fa-inbox"
|
||||
/>
|
||||
<div class="timeline-list">
|
||||
<BaseTimeline :items="filteredTimelineItems">
|
||||
<template #item="{ item }">
|
||||
<template v-if="item.type === 'post'">
|
||||
发布了文章
|
||||
|
||||
<div v-else-if="selectedTab === 'favorites'" class="favorites-container">
|
||||
<div v-if="favoritePosts.length > 0">
|
||||
<BaseTimeline :items="favoritePosts">
|
||||
<template #item="{ item }">
|
||||
<NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
|
||||
{{ item.post.title }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'comment'">
|
||||
在
|
||||
<NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
|
||||
{{ item.comment.post.title }}
|
||||
</NuxtLink>
|
||||
下评论了
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 200) }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'reply'">
|
||||
在
|
||||
<NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
|
||||
{{ item.comment.post.title }}
|
||||
</NuxtLink>
|
||||
下对
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
|
||||
</NuxtLink>
|
||||
回复了
|
||||
<NuxtLink
|
||||
:to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
|
||||
class="timeline-link"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 200) }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'tag'">
|
||||
创建了标签
|
||||
<span class="timeline-link" @click="gotoTag(item.tag)">
|
||||
{{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
|
||||
</span>
|
||||
<div class="timeline-snippet" v-if="item.tag.description">
|
||||
{{ item.tag.description }}
|
||||
<div class="timeline-snippet">
|
||||
{{ stripMarkdown(item.post.snippet) }}
|
||||
</div>
|
||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||
<div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
|
||||
</template>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="selectedTab === 'following'" class="follow-container">
|
||||
<div class="follow-tabs">
|
||||
<div
|
||||
:class="['follow-tab-item', { selected: followTab === 'followers' }]"
|
||||
@click="followTab = 'followers'"
|
||||
>
|
||||
关注者
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
<div
|
||||
:class="['follow-tab-item', { selected: followTab === 'following' }]"
|
||||
@click="followTab = 'following'"
|
||||
>
|
||||
正在关注
|
||||
<div v-else>
|
||||
<BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="follow-list">
|
||||
<UserList v-if="followTab === 'followers'" :users="followers" />
|
||||
<UserList v-else :users="followings" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="selectedTab === 'favorites'" class="favorites-container">
|
||||
<div v-if="favoritePosts.length > 0">
|
||||
<BaseTimeline :items="favoritePosts">
|
||||
<template #item="{ item }">
|
||||
<NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
|
||||
{{ item.post.title }}
|
||||
</NuxtLink>
|
||||
<div class="timeline-snippet">
|
||||
{{ stripMarkdown(item.post.snippet) }}
|
||||
</div>
|
||||
<div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
<div v-else-if="selectedTab === 'achievements'" class="achievements-container">
|
||||
<AchievementList :medals="medals" :can-select="isMine" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="selectedTab === 'achievements'" class="achievements-container">
|
||||
<AchievementList :medals="medals" :can-select="isMine" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</BaseTabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -358,6 +322,7 @@ import { useRoute } from 'vue-router'
|
||||
import AchievementList from '~/components/AchievementList.vue'
|
||||
import BasePlaceholder from '~/components/BasePlaceholder.vue'
|
||||
import BaseTimeline from '~/components/BaseTimeline.vue'
|
||||
import BaseTabs from '~/components/BaseTabs.vue'
|
||||
import LevelProgress from '~/components/LevelProgress.vue'
|
||||
import UserList from '~/components/UserList.vue'
|
||||
import { toast } from '~/main'
|
||||
@@ -400,6 +365,13 @@ const selectedTab = ref(
|
||||
? route.query.tab
|
||||
: 'summary',
|
||||
)
|
||||
const tabs = [
|
||||
{ key: 'summary', label: '总结', icon: 'fas fa-chart-line' },
|
||||
{ key: 'timeline', label: '时间线', icon: 'fas fa-clock' },
|
||||
{ key: 'following', label: '关注', icon: 'fas fa-user-plus' },
|
||||
{ key: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
|
||||
{ key: 'achievements', label: '勋章', icon: 'fas fa-medal' },
|
||||
]
|
||||
const followTab = ref('followers')
|
||||
|
||||
const levelInfo = computed(() => {
|
||||
@@ -796,7 +768,7 @@ watch(selectedTab, async (val) => {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.profile-tabs {
|
||||
:deep(.base-tabs-header) {
|
||||
position: sticky;
|
||||
top: calc(var(--header-height) + 1px);
|
||||
z-index: 200;
|
||||
@@ -810,7 +782,7 @@ watch(selectedTab, async (val) => {
|
||||
backdrop-filter: var(--blur-10);
|
||||
}
|
||||
|
||||
.profile-tabs-item {
|
||||
:deep(.base-tabs-item) {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
@@ -823,7 +795,7 @@ watch(selectedTab, async (val) => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-tabs-item.selected {
|
||||
:deep(.base-tabs-item.selected) {
|
||||
color: var(--primary-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
@@ -982,7 +954,7 @@ watch(selectedTab, async (val) => {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.profile-tabs-item {
|
||||
:deep(.base-tabs-item) {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user