111 lines
2.7 KiB
Vue
111 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import type { AIGeneratedContent } from '.'
|
|
|
|
defineProps<{
|
|
data?: AIGeneratedContent | null
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'regenerate' | 'delete', itemIndex: number): void
|
|
(e: 'regenerateAll' | 'download' | 'save'): void
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="data"
|
|
class="flex flex-col gap-4 rounded-md border p-4 overflow-hidden relative"
|
|
>
|
|
<!-- header -->
|
|
<div class="flex justify-between items-start gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<Icon
|
|
name="mage:stars-c-fill"
|
|
class="text-xl text-amber-500"
|
|
/>
|
|
<h1 class="text-lg font-medium">
|
|
{{ data.title }}
|
|
</h1>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
@click="$emit('regenerateAll')"
|
|
>
|
|
<Icon name="tabler:reload" />
|
|
重新生成
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
@click="$emit('download')"
|
|
>
|
|
<Icon name="tabler:download" />
|
|
下载
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
@click="$emit('save')"
|
|
>
|
|
<Icon name="tabler:copy" />
|
|
存入教案库
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<!-- items -->
|
|
<div
|
|
v-for="(item, i) in data.sections"
|
|
:key="i"
|
|
class="flex flex-col rounded-md border overflow-hidden"
|
|
>
|
|
<div
|
|
class="flex justify-between items-center gap-2 p-2 px-4 bg-gradient-to-r from-primary/15 to-muted text-background"
|
|
>
|
|
<span class="text-sm text-foreground font-medium">
|
|
{{ item.title }}
|
|
</span>
|
|
<div class="flex items-center">
|
|
<!-- <Button
|
|
variant="link"
|
|
size="xs"
|
|
class="text-muted-foreground"
|
|
@click="$emit('regenerate', i)"
|
|
>
|
|
<Icon name="tabler:reload" />
|
|
重新生成
|
|
</Button> -->
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="text-muted-foreground"
|
|
@click="$emit('delete', i)"
|
|
>
|
|
<Icon name="tabler:trash" />
|
|
删除
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 py-2 bg-background">
|
|
<MarkdownRenderer :source="item.content" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<slot
|
|
v-else
|
|
name="empty"
|
|
>
|
|
<div
|
|
class="flex flex-col justify-center items-center gap-2 py-8 rounded-md border"
|
|
>
|
|
<Icon
|
|
name="lucide:text-cursor-input"
|
|
class="text-3xl opacity-50"
|
|
/>
|
|
<span class="text-xs font-medium opacity-50">等待生成内容</span>
|
|
</div>
|
|
</slot>
|
|
</template>
|
|
|
|
<style scoped></style>
|