93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import type { ICourseChapter } from "~/types";
|
|
|
|
const chapters = ref<ICourseChapter[]>([
|
|
{
|
|
id: "1",
|
|
title: "传感器的分类",
|
|
is_published: true,
|
|
sections: [
|
|
{
|
|
id: "1",
|
|
title: "传感器的分类",
|
|
resources: [
|
|
{
|
|
id: "1",
|
|
name: "认识传感器.mp4",
|
|
type: "video",
|
|
url: "",
|
|
allow_download: false,
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "温度传感器.ppt",
|
|
type: "ppt",
|
|
url: "",
|
|
allow_download: true,
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "DHT11 传感器.png",
|
|
type: "image",
|
|
url: "",
|
|
allow_download: true,
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "液位传感器",
|
|
type: "ppt",
|
|
url: "",
|
|
allow_download: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "传感器的工作原理",
|
|
is_published: false,
|
|
sections: [],
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-4 px-4 py-2">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-xl font-medium">课程章节管理</h1>
|
|
<div class="flex items-center gap-4">
|
|
<Tooltip :delay-duration="0">
|
|
<TooltipTrigger>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="flex items-center gap-2 text-muted-foreground"
|
|
>
|
|
<div class="w-2 h-2 rounded-full bg-emerald-500" />
|
|
<span>训练完成</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>点击进行召回测试</TooltipContent>
|
|
</Tooltip>
|
|
<Button variant="secondary" size="sm" class="flex items-center gap-1">
|
|
<Icon name="tabler:plus" size="16px" />
|
|
<span>添加章节</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-8">
|
|
<!-- chatpter -->
|
|
<CourseChapter
|
|
v-for="chapter in chapters"
|
|
:key="chapter.id"
|
|
:tag="chapter.id"
|
|
:chapter="chapter"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|