xuyueandClaude Opus 5.5
d3823430f9
Deploy / deploy (push) Canceled after 0s
- 侧栏按 概览 / 教学内容 / 学情分析 / 站点管理 分组，去掉超管菜单里的重复项； 菜单项的角色与路由守卫一一对应，没有题目权限的教师不再看到点了就被踢回首页的「题目」 - 顶栏：面包屑、回到前台、明暗切换、用户菜单（退出登录）；窄屏侧栏自动收起 - 新增 PageHeader：标题 + 右侧主操作 + 下方筛选栏，编辑页带返回按钮 - 卡点分析 / 年度趋势 / 标签管理从题目列表的按钮挪进侧栏 - 首页改成统计卡片 + 班级排名卡片；设置页按钮移到卡片右上角 - 题目、比赛、题单、用户列表的「选项」列固定在右侧，不再被挤出屏幕 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
124 lines
3.3 KiB
Vue
124 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
import PageHeader from "admin/components/PageHeader.vue"
|
|
import { errorMessage } from "utils/api"
|
|
import CodeEditor from "shared/components/CodeEditor.vue"
|
|
import MarkdownEditor from "shared/components/MarkdownEditor.vue"
|
|
import type { TutorialEdit } from "utils/types"
|
|
import { createTutorial, getTutorial, updateTutorial } from "../api"
|
|
import ExerciseManager from "./components/ExerciseManager.vue"
|
|
|
|
interface Props {
|
|
tutorialID?: string
|
|
}
|
|
|
|
const route = useRoute()
|
|
const message = useMessage()
|
|
const props = defineProps<Props>()
|
|
|
|
const tutorial = reactive<TutorialEdit>({
|
|
id: 0,
|
|
title: "",
|
|
content: "",
|
|
code: "",
|
|
isPublic: false,
|
|
order: 0,
|
|
type: "python", // 默认选择 Python
|
|
})
|
|
|
|
const typeOptions = [
|
|
{ label: "Python", value: "python" },
|
|
{ label: "C 语言", value: "c" },
|
|
]
|
|
|
|
async function init() {
|
|
if (!props.tutorialID) {
|
|
return
|
|
}
|
|
const id = parseInt(route.params.tutorialID as string)
|
|
const data = await getTutorial(id)
|
|
tutorial.id = data.id
|
|
tutorial.title = data.title
|
|
tutorial.content = data.content
|
|
tutorial.code = data.code || ""
|
|
tutorial.isPublic = data.isPublic
|
|
tutorial.order = data.order
|
|
tutorial.type = data.type || "python"
|
|
}
|
|
|
|
async function submit() {
|
|
if (!tutorial.title || !tutorial.content) {
|
|
message.error("标题和正文必填")
|
|
return
|
|
}
|
|
try {
|
|
if (route.name === "admin tutorial create") {
|
|
await createTutorial({
|
|
title: tutorial.title,
|
|
content: tutorial.content,
|
|
code: tutorial.code,
|
|
isPublic: tutorial.isPublic,
|
|
order: tutorial.order,
|
|
type: tutorial.type,
|
|
})
|
|
message.success("成功新建教程 💐")
|
|
} else {
|
|
await updateTutorial(tutorial)
|
|
message.success("修改已保存")
|
|
}
|
|
} catch (err) {
|
|
message.error(errorMessage(err))
|
|
}
|
|
}
|
|
|
|
onMounted(init)
|
|
</script>
|
|
<template>
|
|
<PageHeader
|
|
:title="route.name === 'admin tutorial create' ? '新建教程' : '编辑教程'"
|
|
:back="{ name: 'admin tutorial list' }"
|
|
/>
|
|
<n-form inline>
|
|
<n-form-item label="标题">
|
|
<n-input class="contestTitle" v-model:value="tutorial.title" />
|
|
</n-form-item>
|
|
<n-form-item label="语言">
|
|
<n-select v-model:value="tutorial.type" :options="typeOptions" class="select" />
|
|
</n-form-item>
|
|
<n-form-item label="顺序">
|
|
<n-input-number style="width: 100px" v-model:value="tutorial.order" :min="0" />
|
|
</n-form-item>
|
|
<n-form-item label="可见">
|
|
<n-switch v-model:value="tutorial.isPublic" />
|
|
</n-form-item>
|
|
<n-form-item>
|
|
<n-button type="primary" @click="submit">保存</n-button>
|
|
</n-form-item>
|
|
</n-form>
|
|
|
|
<n-tabs type="line" animated>
|
|
<n-tab-pane name="content" tab="教程内容">
|
|
<MarkdownEditor v-model:value="tutorial.content" />
|
|
</n-tab-pane>
|
|
<n-tab-pane name="code" tab="示例代码">
|
|
<CodeEditor
|
|
v-model:value="tutorial.code"
|
|
:language="tutorial.type === 'python' ? 'Python' : 'C'"
|
|
height="400px"
|
|
/>
|
|
</n-tab-pane>
|
|
<n-tab-pane name="exercises" tab="练习题" :disabled="!tutorial.id">
|
|
<ExerciseManager v-if="tutorial.id" :tutorial-id="tutorial.id" />
|
|
<n-empty v-else description="请先保存教程后再添加练习题" />
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</template>
|
|
<style scoped>
|
|
.select {
|
|
width: 100px;
|
|
}
|
|
|
|
.contestTitle {
|
|
width: 400px;
|
|
}
|
|
</style>
|