fix tag on explore
This commit is contained in:
parent
c6f0047aed
commit
f584c460e3
|
@ -367,11 +367,7 @@ export default defineComponent({
|
||||||
MkA,
|
MkA,
|
||||||
{
|
{
|
||||||
key: Math.random(),
|
key: Math.random(),
|
||||||
to: this.isNote
|
to: `/tags/${encodeURIComponent(token.props.hashtag)}`,
|
||||||
? `/tags/${encodeURIComponent(token.props.hashtag)}`
|
|
||||||
: `/explore/tags/${encodeURIComponent(
|
|
||||||
token.props.hashtag,
|
|
||||||
)}`,
|
|
||||||
style: "color:var(--hashtag);",
|
style: "color:var(--hashtag);",
|
||||||
},
|
},
|
||||||
`#${token.props.hashtag}`,
|
`#${token.props.hashtag}`,
|
||||||
|
|
|
@ -80,14 +80,14 @@
|
||||||
<MkA
|
<MkA
|
||||||
v-for="tag in tagsLocal"
|
v-for="tag in tagsLocal"
|
||||||
:key="'local:' + tag.tag"
|
:key="'local:' + tag.tag"
|
||||||
:to="`/explore/tags/${tag.tag}`"
|
:to="`/tags/${tag.tag}`"
|
||||||
class="local"
|
class="local"
|
||||||
>{{ tag.tag }}</MkA
|
>{{ tag.tag }}</MkA
|
||||||
>
|
>
|
||||||
<MkA
|
<MkA
|
||||||
v-for="tag in tagsRemote"
|
v-for="tag in tagsRemote"
|
||||||
:key="'remote:' + tag.tag"
|
:key="'remote:' + tag.tag"
|
||||||
:to="`/explore/tags/${tag.tag}`"
|
:to="`/tags/${tag.tag}`"
|
||||||
>{{ tag.tag }}</MkA
|
>{{ tag.tag }}</MkA
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -39,7 +39,6 @@ import { Virtual } from "swiper";
|
||||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||||
import XFeatured from "./explore.featured.vue";
|
import XFeatured from "./explore.featured.vue";
|
||||||
import XUsers from "./explore.users.vue";
|
import XUsers from "./explore.users.vue";
|
||||||
import type MkFolder from "@/components/MkFolder.vue";
|
|
||||||
import { definePageMetadata } from "@/scripts/page-metadata";
|
import { definePageMetadata } from "@/scripts/page-metadata";
|
||||||
import { deviceKind } from "@/scripts/device-kind";
|
import { deviceKind } from "@/scripts/device-kind";
|
||||||
import { i18n } from "@/i18n";
|
import { i18n } from "@/i18n";
|
||||||
|
@ -47,23 +46,10 @@ import { defaultStore } from "@/store";
|
||||||
import "swiper/scss";
|
import "swiper/scss";
|
||||||
import "swiper/scss/virtual";
|
import "swiper/scss/virtual";
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
tag?: string;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const tabs = ["featured", "users"];
|
const tabs = ["featured", "users"];
|
||||||
let tab = $ref(tabs[0]);
|
let tab = $ref(tabs[0]);
|
||||||
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
||||||
|
|
||||||
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.tag,
|
|
||||||
() => {
|
|
||||||
if (tagsEl) tagsEl.toggleContent(props.tag == null);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const headerActions = $computed(() => []);
|
const headerActions = $computed(() => []);
|
||||||
|
|
||||||
const headerTabs = $computed(() => [
|
const headerTabs = $computed(() => [
|
||||||
|
|
|
@ -1,24 +1,58 @@
|
||||||
<template>
|
<template>
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header
|
<template #header
|
||||||
><MkPageHeader :actions="headerActions" :tabs="headerTabs"
|
><MkPageHeader
|
||||||
|
v-model:tab="tab"
|
||||||
|
:actions="headerActions"
|
||||||
|
:tabs="headerTabs"
|
||||||
|
:display-back-button="true"
|
||||||
/></template>
|
/></template>
|
||||||
<MkSpacer :content-max="800">
|
<MkSpacer :content-max="800">
|
||||||
<XNotes class="_content" :pagination="pagination" />
|
<swiper
|
||||||
|
:modules="[Virtual]"
|
||||||
|
:space-between="20"
|
||||||
|
:virtual="true"
|
||||||
|
:allow-touch-move="
|
||||||
|
!(
|
||||||
|
deviceKind === 'desktop' &&
|
||||||
|
!defaultStore.state.swipeOnDesktop
|
||||||
|
)
|
||||||
|
"
|
||||||
|
@swiper="setSwiperRef"
|
||||||
|
@slide-change="onSlideChange"
|
||||||
|
>
|
||||||
|
<swiper-slide>
|
||||||
|
<XNotes ref="notes" :pagination="notesPagination" />
|
||||||
|
</swiper-slide>
|
||||||
|
<swiper-slide>
|
||||||
|
<XUserList
|
||||||
|
ref="users"
|
||||||
|
class="_gap"
|
||||||
|
:pagination="usersPagination"
|
||||||
|
/>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
</MkSpacer>
|
</MkSpacer>
|
||||||
</MkStickyContainer>
|
</MkStickyContainer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from "vue";
|
import { computed, watch, onMounted } from "vue";
|
||||||
|
import { Virtual } from "swiper";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||||
import XNotes from "@/components/MkNotes.vue";
|
import XNotes from "@/components/MkNotes.vue";
|
||||||
|
import XUserList from "@/components/MkUserList.vue";
|
||||||
|
import { i18n } from "@/i18n";
|
||||||
import { definePageMetadata } from "@/scripts/page-metadata";
|
import { definePageMetadata } from "@/scripts/page-metadata";
|
||||||
|
import { defaultStore } from "@/store";
|
||||||
|
import "swiper/scss";
|
||||||
|
import "swiper/scss/virtual";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
tag: string;
|
tag: string;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const pagination = {
|
const notesPagination = {
|
||||||
endpoint: "notes/search-by-tag" as const,
|
endpoint: "notes/search-by-tag" as const,
|
||||||
limit: 10,
|
limit: 10,
|
||||||
params: computed(() => ({
|
params: computed(() => ({
|
||||||
|
@ -26,10 +60,43 @@ const pagination = {
|
||||||
})),
|
})),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const usersPagination = {
|
||||||
|
endpoint: "users/search" as const,
|
||||||
|
limit: 10,
|
||||||
|
params: computed(() => ({
|
||||||
|
query: `#${props.tag}`,
|
||||||
|
origin: "combined",
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
|
||||||
|
const tabs = ["notes", "users"];
|
||||||
|
let tab = $ref(tabs[0]);
|
||||||
|
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
||||||
|
|
||||||
const headerActions = $computed(() => []);
|
const headerActions = $computed(() => []);
|
||||||
|
|
||||||
const headerTabs = $computed(() => []);
|
const headerTabs = $computed(() => []);
|
||||||
|
|
||||||
|
let swiperRef = null;
|
||||||
|
|
||||||
|
function setSwiperRef(swiper) {
|
||||||
|
swiperRef = swiper;
|
||||||
|
syncSlide(tabs.indexOf(tab));
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSlideChange() {
|
||||||
|
tab = tabs[swiperRef.activeIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncSlide(index) {
|
||||||
|
swiperRef.slideTo(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
syncSlide(tabs.indexOf(swiperRef.activeIndex));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
definePageMetadata(
|
definePageMetadata(
|
||||||
computed(() => ({
|
computed(() => ({
|
||||||
title: props.tag,
|
title: props.tag,
|
||||||
|
|
Loading…
Reference in New Issue