133 lines
4.2 KiB
Vue
133 lines
4.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ChevronLeft } from "lucide-vue-next";
|
|
import type { ICourseChapter } from "~/types";
|
|
|
|
const props = defineProps<{
|
|
tag?: string;
|
|
chapter: ICourseChapter;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "delete-chapter", chapterId: string): void;
|
|
}>();
|
|
|
|
const handleDeleteChapter = () => {
|
|
if (props.chapter.sections.length > 0) {
|
|
const confirmDelete = confirm(
|
|
"该章节下有小节，删除后将无法恢复，是否继续？"
|
|
);
|
|
if (!confirmDelete) return;
|
|
}
|
|
emit("delete-chapter", props.chapter.id);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-1 relative">
|
|
<div
|
|
v-if="chapter.sections.length > 0"
|
|
class="absolute inset-y-0 left-9 bottom-6 w-[1px] bg-gray-300 dark:bg-gray-700 z-0"
|
|
/>
|
|
<Collapsible class="group/collapsible z-10" :default-open="true">
|
|
<div
|
|
class="w-full px-4 py-3 rounded-md bg-indigo-50 dark:bg-muted flex justify-between items-center"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-10 flex justify-center">
|
|
<Badge variant="secondary" class="text-xs text-white bg-indigo-400">
|
|
<span>
|
|
{{
|
|
tag || chapter.sections.length > 0
|
|
? chapter.sections.length
|
|
: 0
|
|
}}
|
|
</span>
|
|
</Badge>
|
|
</div>
|
|
<h1 class="text-base font-semibold text-ellipsis line-clamp-1">
|
|
{{ chapter.title }}
|
|
</h1>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<!-- TODO: hide actions defaulty -->
|
|
<div
|
|
class="flex items-center gap-2 opacity-100 group-hover/collapsible:opacity-100 transition-opacity duration-200"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="flex items-center gap-2 text-muted-foreground"
|
|
>
|
|
<div
|
|
v-if="chapter.is_published"
|
|
class="w-2 h-2 rounded-full bg-emerald-500"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-500"
|
|
/>
|
|
<span>{{ chapter.is_published ? "已发布" : "未发布" }}</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>TBD.</TooltipContent>
|
|
</Tooltip>
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="flex items-center gap-1 text-muted-foreground"
|
|
>
|
|
<Icon name="tabler:automation" size="16px" />
|
|
<span>章节检测</span>
|
|
</Button>
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="flex items-center gap-1 text-muted-foreground"
|
|
>
|
|
<Icon name="tabler:plus" size="16px" />
|
|
<span>添加小节</span>
|
|
</Button>
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="flex items-center gap-1 text-red-500"
|
|
@click="handleDeleteChapter"
|
|
>
|
|
<Icon name="tabler:trash" size="16px" />
|
|
<span>删除</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<CollapsibleTrigger>
|
|
<ChevronLeft
|
|
class="transition-transform duration-200 group-data-[state=open]/collapsible:-rotate-90 text-muted-foreground"
|
|
/>
|
|
<span class="sr-only">Toggle</span>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
</div>
|
|
<CollapsibleContent class="pt-4">
|
|
<div v-if="chapter.sections.length > 0" class="flex flex-col gap-4">
|
|
<!-- Section -->
|
|
<CourseSection
|
|
v-for="section in chapter.sections"
|
|
:key="section.id"
|
|
:section="section"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="flex items-center justify-center gap-2 text-muted-foreground"
|
|
>
|
|
<Icon name="tabler:circle-minus" size="16px" />
|
|
<span class="text-sm">该章节没有内容</span>
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|