87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<script lang="ts" setup>
|
|
import type { ICourseSection } from "~/types";
|
|
|
|
const props = defineProps<{
|
|
tag?: string;
|
|
section: ICourseSection;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "delete-section", sectionId: string): void;
|
|
}>();
|
|
|
|
const handleDeleteSection = () => {
|
|
if (props.section.resources.length > 0) {
|
|
const confirmDelete = confirm(
|
|
"该小节下有资源，删除后将无法恢复，是否继续？"
|
|
);
|
|
if (!confirmDelete) return;
|
|
}
|
|
emit("delete-section", props.section.id);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rounded-md border border-muted overflow-hidden">
|
|
<div
|
|
class="w-full px-4 py-2.5 bg-muted dark:bg-muted/50 flex justify-between items-center group/section"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-10 flex justify-center">
|
|
<Badge variant="outline" class="text-xs bg-background">
|
|
<span>
|
|
{{
|
|
tag || section.resources.length > 0
|
|
? section.resources.length
|
|
: 0
|
|
}}
|
|
</span>
|
|
</Badge>
|
|
</div>
|
|
<h2 class="inline-flex items-center gap-2 text-sm font-medium">
|
|
<span>1.1</span>
|
|
<span class="text-ellipsis line-clamp-1">什么传感器</span>
|
|
</h2>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-2 mr-8 opacity-0 group-hover/section:opacity-100"
|
|
>
|
|
<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="handleDeleteSection"
|
|
>
|
|
<Icon name="tabler:trash" size="16px" />
|
|
<span>删除</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div v-if="section.resources.length > 0" class="flex flex-col gap-2">
|
|
<!-- Resource -->
|
|
<CourseResource
|
|
v-for="resource in section.resources"
|
|
:key="resource.id"
|
|
:resource="resource"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="py-4 flex items-center justify-center gap-2 text-muted-foreground"
|
|
>
|
|
<Icon name="tabler:circle-minus" size="16px" />
|
|
<span class="text-sm">该小节下暂无资源</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|