refactor
This commit is contained in:
		| @@ -2,24 +2,18 @@ | ||||
| <MkStickyContainer> | ||||
| 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> | ||||
| 	<MkSpacer :content-max="700"> | ||||
| 		<div v-if="tab === 'my'" class="qtcaoidl"> | ||||
| 		<div v-if="tab === 'my'" class="_gaps"> | ||||
| 			<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton> | ||||
|  | ||||
| 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list"> | ||||
| 				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _margin"> | ||||
| 					<b>{{ item.name }}</b> | ||||
| 					<div v-if="item.description" class="description">{{ item.description }}</div> | ||||
| 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="_gaps"> | ||||
| 				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`"> | ||||
| 					<MkClipPreview :clip="item"/> | ||||
| 				</MkA> | ||||
| 			</MkPagination> | ||||
| 		</div> | ||||
| 		<div v-else-if="tab === 'favorites'" class="_gaps"> | ||||
| 			<MkA v-for="item in favorites" :key="item.id" :to="`/clips/${item.id}`" :class="$style.clip" class="_panel"> | ||||
| 				<b>{{ item.name }}</b> | ||||
| 				<div v-if="item.description" :class="$style.clipDescription">{{ item.description }}</div> | ||||
| 				<div v-if="item.lastClippedAt">{{ i18n.ts.updatedAt }}: <MkTime :time="item.lastClippedAt" mode="detail"/></div> | ||||
| 				<div :class="$style.clipUser"> | ||||
| 					<MkAvatar :user="item.user" :class="$style.clipUserAvatar" indicator link preview/> <MkUserName :user="item.user" :nowrap="false"/> | ||||
| 				</div> | ||||
| 			<MkA v-for="item in favorites" :key="item.id" :to="`/clips/${item.id}`"> | ||||
| 				<MkClipPreview :clip="item"/> | ||||
| 			</MkA> | ||||
| 		</div> | ||||
| 	</MkSpacer> | ||||
| @@ -30,6 +24,7 @@ | ||||
| import { watch } from 'vue'; | ||||
| import MkPagination from '@/components/MkPagination.vue'; | ||||
| import MkButton from '@/components/MkButton.vue'; | ||||
| import MkClipPreview from '@/components/MkClipPreview.vue'; | ||||
| import * as os from '@/os'; | ||||
| import { i18n } from '@/i18n'; | ||||
| import { definePageMetadata } from '@/scripts/page-metadata'; | ||||
| @@ -103,44 +98,6 @@ definePageMetadata({ | ||||
| }); | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .qtcaoidl { | ||||
| 	> .add { | ||||
| 		margin: 0 auto 16px auto; | ||||
| 	} | ||||
|  | ||||
| 	> .list { | ||||
| 		> .item { | ||||
| 			display: block; | ||||
| 			padding: 16px; | ||||
|  | ||||
| 			> .description { | ||||
| 				margin-top: 8px; | ||||
| 				padding-top: 8px; | ||||
| 				border-top: solid 0.5px var(--divider); | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
| </style> | ||||
|  | ||||
| <style lang="scss" module> | ||||
| .clip { | ||||
| 	display: block; | ||||
| 	padding: 16px; | ||||
| } | ||||
|  | ||||
| .clipDescription { | ||||
| 	padding: 8px 0; | ||||
| } | ||||
|  | ||||
| .clipUser { | ||||
| 	padding-top: 16px; | ||||
| 	border-top: solid 0.5px var(--divider); | ||||
| } | ||||
|  | ||||
| .clipUserAvatar { | ||||
| 	width: 32px; | ||||
| 	height: 32px; | ||||
| } | ||||
| </style> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo