<template>
  <div class="page-content">
    <div class="mb-5 flex items-center justify-between"><div><h2 class="text-xl font-semibold">Prompt 广场</h2><p class="text-g-500 mt-1 text-sm">查找、查看并收藏部门可用模板</p></div><ElInput v-model="query" clearable placeholder="搜索名称、描述或标签" class="w-72" @keyup.enter="load" @clear="load"><template #append><ElButton @click="load">搜索</ElButton></template></ElInput></div>
    <div v-loading="loading" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3"><ElCard v-for="item in items" :key="item.id" shadow="hover"><div class="flex items-start justify-between"><div><b>{{item.name}}</b><div class="text-g-500 mt-1 text-xs">{{item.category_name||'未分类'}} · v{{item.current?.version}}</div></div><ElButton circle text @click="favorite(item)"><ArtSvgIcon :icon="item.favorite?'ri:star-fill':'ri:star-line'" :class="item.favorite?'text-warning':''"/></ElButton></div><p class="text-g-500 my-3 min-h-10 text-sm">{{item.description||'暂无描述'}}</p><div class="mb-3"><ElTag v-for="tag in item.tags" :key="tag" class="mr-1" size="small">{{tag}}</ElTag></div><ElButton link type="primary" @click="selected=item">查看模板</ElButton></ElCard></div><ElEmpty v-if="!loading&&!items.length"/>
    <ElDrawer v-model="drawer" title="Prompt 详情" size="620px"><template v-if="selected"><h3 class="text-lg font-semibold">{{selected.name}}</h3><p class="text-g-500 my-3">{{selected.description}}</p><ElAlert title="模板内容可能包含内部指令，请按授权范围使用" type="info" :closable="false"/><pre class="mt-4 max-h-[55vh] overflow-auto rounded bg-g-100 p-4 whitespace-pre-wrap dark:bg-g-900">{{selected.current?.content}}</pre></template></ElDrawer>
  </div>
</template>
<script setup lang="ts">
import {Prompt,fetchPrompts,setPromptFavorite} from '@/api/portal';import{ElMessage}from'element-plus'
const loading=ref(false),query=ref(''),items=ref<Prompt[]>([]),selected=ref<Prompt>();const drawer=computed({get:()=>!!selected.value,set:v=>{if(!v)selected.value=undefined}})
async function load(){loading.value=true;try{items.value=await fetchPrompts(query.value)}finally{loading.value=false}}async function favorite(item:Prompt){await setPromptFavorite(item.id,!item.favorite);item.favorite=!item.favorite;ElMessage.success(item.favorite?'已收藏':'已取消收藏')}onMounted(load)
</script>

