Timothy Yin
b05f954923
fix: update home page background image and remove unnecessary redirect code chore: update pnpm lock file with new dependencies for auto-animate and svg spinners delete: remove unused images from public directory refactor: modify course and user types for better clarity and structure feat: implement course API with CRUD operations and teacher team management feat: create user authentication page with login functionality and validation feat: add login state management with Pinia for user session handling style: create reusable UI components for cards and tabs chore: implement HTTP utility for API requests with error handling
89 lines
2.5 KiB
Vue
89 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
import type { ICourseSection } from "~/types";
|
|
|
|
const props = defineProps<{
|
|
tag?: string;
|
|
section: ICourseSection;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
"delete-section": [sectionId: number];
|
|
"delete-resource": [resourceId: number];
|
|
}>();
|
|
|
|
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">{{ section.title }}</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"
|
|
@delete-resource="emit('delete-resource', resource.id)"
|
|
/>
|
|
</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>
|