xuyueandClaude Opus 5.5
7a390323fe
拦截器原来 reject 一个裸对象 `{ error, data }`，没有类型也没有类型守卫，于是 46 处
`catch (err: any)` 直接读 `err.data` / `err.error` —— 代码 bug 抛出的 TypeError 也按
接口错误读，弹出来的是 undefined 或英文。
- utils/api.ts：reject 改成 `ApiError extends Error`，字段名沿用 error（错误码）/
data（文案），存量读法语义不变；加 isApiError / errorCode / errorMessage。
errorMessage 对非接口错误一律用 fallback，不把 TypeError 的英文甩给学生
- 46 处 catch 全部换掉 any（45 处接口错误 + pythonSyntaxCheck 里 Skulpt 的错误对象）
- 断网等没有响应体的情况，文案从英文 "Request failed" 换成「网络异常，请检查网络后重试」
浏览器实跑核过：登录密码错误仍显示「用户名或密码不正确」（错误码分支）、
接口错误 reject 出来是 ApiError、网络不通时拿到中文文案、非接口错误走 fallback。
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
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>
|
|
<h2 class="title">
|
|
{{ route.name === "admin tutorial create" ? "新建教程" : "编辑教程" }}
|
|
</h2>
|
|
<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>
|
|
.title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.select {
|
|
width: 100px;
|
|
}
|
|
|
|
.contestTitle {
|
|
width: 400px;
|
|
}
|
|
</style>
|