feat：移除了弹窗，服务器添加sls

2026-09-08 22:39:45 +08:00
commit 6a295f9a7a
@@ -0,0 +1,119 @@
+<script setup>
+import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
+import { Avatar, FormattedTag, TagItem, useCompactNumber } from '@modrinth/ui'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+dayjs.extend(relativeTime)
+
+const router = useRouter()
+
+const { formatCompactNumber } = useCompactNumber()
+
+const props = defineProps({
+	project: {
+		type: Object,
+		default() {
+			return {}
+		},
+	},
+})
+
+const featuredCategory = computed(() => {
+	if (props.project.display_categories.includes('optimization')) {
+		return 'optimization'
+	}
+
+	return props.project.display_categories[0] ?? props.project.categories[0]
+})
+
+const toColor = computed(() => {
+	let color = props.project.color
+
+	color >>>= 0
+	const b = color & 0xff
+	const g = (color >>> 8) & 0xff
+	const r = (color >>> 16) & 0xff
+	return 'rgba(' + [r, g, b, 1].join(',') + ')'
+})
+
+const toTransparent = computed(() => {
+	let color = props.project.color
+
+	color >>>= 0
+	const b = color & 0xff
+	const g = (color >>> 8) & 0xff
+	const r = (color >>> 16) & 0xff
+	return (
+		'linear-gradient(rgba(' +
+		[r, g, b, 0.03].join(',') +
+		'), 65%, rgba(' +
+		[r, g, b, 0.3].join(',') +
+		'))'
+	)
+})
+</script>
+
+<template>
+	<div
+		class="card-shadow bg-bg-raised rounded-xl overflow-clip cursor-pointer hover:brightness-90 transition-all"
+		@click="router.push(`/project/${project.slug}`)"
+	>
+		<div
+			class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
+			:style="{
+				'background-color': (project.featured_gallery ?? project.gallery[0]) ? null : toColor,
+				'background-image': project.featured_gallery
+					? `url(${project.featured_gallery})`
+					: project.gallery[0]
+						? `url(${project.gallery[0]})`
+						: null,
+			}"
+		>
+			<div
+				class="badges-wrapper"
+				:class="{
+					'no-image': !project.featured_gallery && !project.gallery[0],
+				}"
+				:style="{
+					background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
+				}"
+			></div>
+		</div>
+		<div class="flex flex-col justify-center gap-2 px-4 py-3">
+			<div class="flex gap-2 items-center">
+				<Avatar size="48px" :src="project.icon_url" />
+				<div class="h-full flex items-center font-bold text-contrast leading-normal">
+					<span class="line-clamp-2">{{ project.title }}</span>
+				</div>
+			</div>
+			<p class="m-0 text-sm font-medium line-clamp-3 leading-tight h-[3.25rem]">
+				{{ project.description }}
+			</p>
+			<div class="flex items-center gap-2 text-sm text-secondary font-semibold mt-auto">
+				<div
+					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
+				>
+					<DownloadIcon />
+					{{ formatCompactNumber(project.downloads) }}
+				</div>
+				<div
+					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
+				>
+					<HeartIcon />
+					{{ formatCompactNumber(project.follows) }}
+				</div>
+				<div class="flex items-center gap-1 pr-2">
+					<TagIcon />
+					<TagItem>
+						<FormattedTag :tag="featuredCategory" />
+					</TagItem>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss"></style>