chatGpt/components/prompt-list/prompt-list.vue

<template>
	<view>
		<view class="cu-list menu-avatar margin-bottom">
			<view v-for="item in promptList" :key="item.title" class="cu-item">
				<text v-show="$store.getters.favorPromptList.indexOf(item.id) >= 0" class="cuIcon-favorfill text-orange"></text>
				<image class="cu-avatar radius lg" :src="`/static/icon/prompt/${item.icon}`">
				<view class="content" @tap="runPrompt(item)">
					<view class="text-shadow text-black">{{ item.title }}</view>
					<view class="text-gray text-sm flex">
						<text class="desc">{{ item.remark }}</text>
					</view>
				</view>
				<view class="action">
					<view class="text-grey">{{ renderWeight(item) }}</view>
					<button class="cu-btn round sm line-cyan flex" @tap="showDetail(item)">
						详情
					</button>
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal" :class="showDetailModal ? 'show' : ''" @tap="showDetailModal = false">
			<view class="cu-dialog bg-white" @tap.stop="" style="height: 60%;overflow: auto;">
				<view class="cu-bar bg-white justify-end">
					<view class="action" @tap="toggleFavor(curItem)">
						<text :class="[$store.getters.favorPromptList.indexOf(curItem.id) >= 0 ? 'cuIcon-favorfill' : 'cuIcon-favor', 'text-orange']"></text>
					</view>
					<view class="content">提示词详细</view>
					<view class="action text-cyan" @tap="runPrompt(curItem)">进入对话</view>
					<view class="action" @tap="showDetailModal = false">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="padding-bottom-lg">
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-titles text-cyan"></text> 提示词
						</view>
					</view>
					<view class="text-left padding-lr-sm padding-top-sm bg-white flex justify-between">
						<view>{{ curItem.title }}</view>
						<view>{{ renderWeight(curItem) }}</view>
					</view>
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-titles text-cyan"></text> 说明
						</view>
					</view>
					<view class="text-left padding-lr-sm padding-top-sm bg-white">
						{{ curItem.remark }}
					</view>
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-titles text-cyan"></text> 中文提示
						</view>
					</view>
					<view class="text-left padding-lr-sm padding-top-sm bg-white">
						{{ curItem.desc_cn }}
					</view>
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-titles text-cyan"></text> 英文提示
						</view>
					</view>
					<view class="text-left padding-lr-sm padding-top-sm bg-white">
						{{ curItem.desc_en }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PromptList',
		props: {
			promptList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				curItem: {},
				showDetailModal: false
			}
		},
		methods: {
			showDetail(item) {
				this.curItem = item
				this.showDetailModal = true
			},
			runPrompt(item) {
				this.$squni.navigateTo('/pages/main/index?promptId=' + item.id)
			},
			toggleFavor(item) {
				let favorPromptList = this.$store.getters.favorPromptList
				const index = favorPromptList.indexOf(item.id)
				if(index >= 0) {
					favorPromptList.splice(index, 1)
				} else {
					favorPromptList.push(item.id)
				}
				this.$store.commit('setFavorPromptList', favorPromptList)
				this.$emit('toggle-favor')
			},
			renderWeight(item) {
				return item.weight > 10000 ? ('🚀 ' + (item.weight / 10000).toFixed(1) + 'w') : (item.weight > 1000 ? ('🔥 ' + (item.weight / 1000).toFixed(1) + 'k') : '🧊 ' + item.weight)
			}
		}
	}
</script>

<style lang="scss">
	.cu-list.menu-avatar>.cu-item {
		.content {
			width: calc(100% - 96upx - 60upx - 110upx - 20upx);
		}
		.action {
			width: 110upx;
		}
	}
	
	.cu-list .cu-item {
		.cuIcon-favorfill {
			position: absolute;
			bottom: 2upx;
			left: 12upx;
		}
		.cu-avatar {
			background-color: transparent;
		}
		.content .desc {
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
</style>